jQuery scrollTop - 動畫不起作用

使用發現的示例here，我試着使用相同的工具。當我點擊一個導航鏈接時，它跳轉到選定的div而不是滑動/滾動。jQuery scrollTop - 動畫不起作用

HTML：

導航

<div class="span3"> 
     <a href="#about-me"><img class="img-circle" src="http://placehold.it/200x200/e36b23/fff/&text=About+Me+"></a> 
</div>

DIV

<div class="row-fluid" id="about-me"> ... </div>

JS：

<script> 
$(document).ready(function(){ 

    $('nav ul li a').click(function(){ 
     var el = $(this).attr('href'); 
     var elWrapped = $(el); 

     scrollToDiv(elWrapped,40); 

     return false; 
    }); 

    function scrollToDiv(element, navheight){ 
     var offset = element.offset(); 
     var offsetTop = offset.top; 
     var totalScroll = offsetTop - navheight; 

     $('body,html').animate({ 
      scrollTop: totalScroll 
     }, 1000); 
    } 
}); 
</script>

所以它是'點擊'div但不是與幻燈片動畫 - 這是我想要的。有人有主意嗎？

來源

2012-11-07 MattSull

由於你的鏈接是一個有效的錨，我說你很可能看到的默認行爲，因爲沒有被執行了jQuery。 –

請完全忽略這個jsfiddle – rahul

您需要調整您的jQuery選擇，以配合您的HTML類 - 你不使用你舉的例子使用了相同的ul/li，例如

$('.span3 a').click(function(){

的小提琴見here：

來源

2012-11-07 13:54:32 StuartLC

，以後我會知道，謝謝。 – MattSull

您不會阻止默認行爲，即直接導航（「跳轉」）到錨點。所以這裏有雲：

$('nav ul li a').click(function(evt){ 
    evt.preventDefault(); 
    ... 
});

來源

2012-11-07 12:58:23 zvona

jQuery scrollTop - 動畫不起作用

回答

相關問題