3

ページの特定の部分までスムーズにスクロールするにはどうすればよいですか?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<a href="#" class="scrollToBottom"><img src="images/godown.png" alt="Down Arrow" width="116" /></a>

<script type="text/javascript">


$(document).ready(function(){

 // Scroll page to the bottom
 $('a.scrollToBottom').click(function(){

 $('html, body, .content').animate({scrollTop: $(document).height()}, 1500);

 return false;

 });
})
</script>

そのコードが行うことは、「godown.png」画像をクリックすると機能しますが、ページの最後に移動します。とにかく真ん中に行くには？そして、#middle などで真ん中をどのように定義しますか?

4

3 に答える 3

2

スムーズにするには、e.preventDefault（）;を追加します。スクロール機能で

$('a.scrollToBottom').click(function(e){
     e.preventDefault();
     $('html, body, .content').animate({scrollTop: $(document).height()}, 1500);
});
于 2012-11-17T21:31:03.463 に答える
0

ページの特定の部分にスクロールするには、jQuery 関数のオフセット [ http://api.jquery.com/offset/ ] を使用して、ページに対する要素のオフセットを計算できます。次に、ドキュメント内の特定の位置までスクロールできます。

例

html:

<a href="#">scroll to c</a>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

js と jQuery:

$("a").click(function(e){
    var targetOffset= $("#c").offset().top;
    $('html, body').animate({scrollTop: targetOffset}, 1500);
    e.preventDefault();    
});

完全なコード: http://jsfiddle.net/rniestroj/FkCK8/

于 2012-11-18T11:18:04.823 に答える