2013-07-06 2 views
0

반복되는 함수를 변경하여 DRY 원칙을 따르려고합니다.하지만 여기에 붙어 있습니다. 나는 (내가 을 사용하고 jQuery를)를 다른 클래스IDS 더 일반적인 방식으로 4 번 반복 기능이 스크롤을 변경하려면 :jquery scrollTop 함수에 문제가 있습니다.

$('.empresa').click(function(event){ 
    $('html, body').animate({ 
     scrollTop: $("#empresa").offset().top 
    }, 500); 
    return false; 
    }); 
    $('.nosotros').click(function(event){ 
    $('html, body').animate({ 
     scrollTop: $("#nosotros").offset().top 
    }, 500); 
    return false; 
    }); 

클래스가의 요소 ul 내에서의 탐색은 다음과 같습니다.

<ul class="nav"> 
    <li><a href="index#nosotros" class="nosotros">Link to the anchor</a></li> 
    <li><a href="index#empresa" class="empresa">Link to the anchor</a></li> 
</ul> 

이 태그로 스크롤 태그는 div 요소입니다.

<div class="some-random-class" id="empresa" name="empresa"> 
<div class="some-random-class" id="nosotros" name="nosotros"> 

내가 적절한 앵커 목록의 클래스를 잡기 위해 새로운 선택기를 사용했지만, 난 함수의 스크롤 부분에 문제가있어, 내가/사용하는 클래스를 변환 모르거나 이드에게 추출 된 객체의 이름은 이전에했던 것과 같은 방식으로 계속 사용할 수 있습니다.

$('.nav li').children('a').click(function() { 
    alert($(this).attr('class')); 
}); 

너희들이 나를 도울 수 있기를 바랍니다! 또한 사용할 수 있습니다

답변

2
$('.nav > li > a').click(function(e){ 
    e.preventDefault(); 
    $('html,body').animate({ 
     scrollTop: $('#'+$(this).prop('class')).offset().top 
    }); 
}); 
0

: hiperlink에

$('.fluidJump').on('click', function(event) { 
    event.preventDefault(); 
    var offset = $($(this).attr('href')).offset().top; 
    $('html, body').animate({scrollTop:offset}, 500); 
}); 

추가 "fluidJump"클래스는 애니메이션 해당 섹션으로 이동합니다. (숫자 값)

<a href="#sectionid">Go to section</a>