jQuery：次へジャンプ<section>

Question

これはかなり基本的なはずです...私はそれをやっていますが、いくつかのオプションを求めていました。

「スムーススクロール」とアンカーの名前を使用しているオプションが1つありますが、それはかなり矛盾しています。

これは私のHTML構造である：

<section id="home"> 
<!-- some content --> 
</section> 

<section id="about"> 
<!-- some content --> 
</section> 

<section id="services"> 
<!-- some content --> 
</section> 

... 

私はセクションの右側にいくつかの「クイックボタン」を持っており、基本的には上下セクションへのセクションから「移動」することができます。

Answer 1

scrollTo jQueryプラグインを見ると、あなたのニーズを完全に満たすはずです。

Answer 2

あなたは、ユーザーがクリックしたリンクに応じてページを上下にスクロールしたいと思っていますか？

私の経験では、jQuery.ScrollToプラグインがこれに最適です。使いやすく、多くの支持

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Answer 3

jQuery.fn.extend({ 
    scrollTo : function(speed, easing) { 
    return this.each(function() { 
     var targetOffset = $(this).offset().top; 
     $('html,body').animate({scrollTop: targetOffset}, speed, easing); 
    }); 
    } 
}); 

// Scroll to "about" section 
$('#about').scrollTo('fast', 'linear'); 

更新 - 単純なイベントハンドラを使用するセクションからセクションへジャンプする：

はJQuery：

$('.next-section').click(function(){ 
    var $this = $(this), 
     $next = $this.parent().next(); 

    $next.scrollTo($next.offset().top, 500, 'linear'); 
}); 

$('.prev-section').click(function(){ 
    var $this = $(this), 
     $prev = $this.parent().prev(); 

    $prev.scrollTo($prev.offset().top, 500, 'linear'); 
}); 

HTML：

<section id="about"> 
    <a href="#" class="prev-section">Previous Section</a> 
    <a href="#" class="next-section">Next Section</a> 
    <div class="section-content"> 
     Foobar 
    </div> 
</section> 

はここでデモです：http://jsfiddle.net/AlienWebguy/Xdg2k/

Answer 4

あなただけのscrollTopスプライトに

var doc = (document.contentWindow || document).document || document.ownerDocument || document, 
    el = ($.browser.webkit) ? doc.body : doc.documentElement; 

$(el).scrollTop($('#services').offset().top); 

Answer 5

を設定してみてください可能性があり、私は次の私の「ジャンプのためMooToolsのを使用して素晴らしいスムーズスクロールを得ることができましたjqueryもののギザギザが好きではない。もう少し微調整を行うと、ページ上の他のjqueryと一貫して動作します。

http://davidwalsh.name/smooth-scroll-mootools

私はそれを使用するサイトは現在建設中であるが、ここに表示するセクションのリボンをクリックしてリンクhttp://ggszabo/new/indexb.html

です。