jQuery平滑滾動

我試圖實現平滑滾動到信息索引。我看過這個jsFiddle http://jsfiddle.net/9SDLw/，我無法讓它工作。代碼插入HTML文檔或其他什麼地方有關係嗎？jQuery平滑滾動

這裏是我的代碼：

JS（在文件頭）：

<script type="text/javascript"> 
$('a').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top 
    }, 500); 
    return false; 
}); 
</script>

標記：

鏈接

<a href = "#G" rel = "" id="G" class="anchorLink">G</a><br />

錨

<a name = "G" id="G"><span class = "letters">G</span></a><br />

我在這裏錯過了什麼？

來源

2012-05-11 Ben

你需要把它放在一個的document.ready（） –

jsBin demo

<ul id="links"> 
    <li><a href="#a">Go to a</a></li> 
    <li><a href="#b">Go to b</a></li> 
</ul>

，比某個文檔中......

<h2 id="a">Article "a"</h2> 
Lorem...... 
<h2 id="b">Article "b"</h2> 
Lorem......

JQ：

$('#links a').click(function(e){ 
    e.preventDefault(); 
    var targetId = $(this).attr("href"); 
    var top = $(targetId).offset().top; 
    $('html, body').stop().animate({scrollTop: top }, 1500); 
});

上述操作是使用檢索到的錨什麼href並將其用作jQuery' s ＃（id）選擇器。找到ID元素，獲得頂部offset，最後爲頁面設置動畫。

來源

2012-05-11 17:49:31

，如果我用這個方法，我是將有想出大量的ID？我想實現平滑滾動到按字母順序排列的測試類型列表。我怎麼能用這種方法做到這一點？ – Ben

@你是說你想擁有：'a_link，b_link ...'，同時'a_content，b_content'等等，對吧？ –

有點。基本上我只是用一些CSS來寫一個字母「A」。然後在側邊欄上，我有一個A，它將對應於第一個A的錨點。依此類推，直到字母表。所以添加ID會讓我覺得很痛苦。 – Ben

-1

，必須用你所有的代碼

$(document).ready(function(){ ... });

或只是

$(function(){ ... });

來源

2013-06-27 03:25:09 user2526475

jQuery平滑滾動

回答

相關問題