2

上部にいくつかのリンクがある Web サイトを見たことがあります。最初のリンクの例をクリックすると、ページ上でクリックした ID (#) まで下にスクロールされます (jQuery のスクロール ダウン効果)。（リンク付きのメニューはあなたに従っています）。その後、別のリンクをクリックすると、ページのさらに下に移動します。

この手法の名前を見つけることができません。縦方向のページのスライドに関する検索では、期待したものは返されませんでした。

Tumblr.com にはこのようなものがありますが、私が探しているものとはまったく異なります。 http://www.w3.org/html/logoにもこのようなものがあります。ここで欠けているのは、ページがスクロールしているときに下に続くメニューだけです。

誰かがこれに光を当てるのを手伝ってくれますか? または、いくつかの例を教えてください。

前もって感謝します！

4

4 に答える 4

2

スクロールしたい要素の垂直方向のオフセットを取得し、その要素 (またはスクロールしている要素) のscrollTopプロパティをアニメーション化するだけです。window

//bind to all links whose `href` attribute starts with a hash
$('a[href^="#"]').on('click', function () {

    //get the offset from the document's top for the element targeted in the links `href` attribute
    var offset = $($(this).attr('href')).offset().top;

    //scroll the document, some browsers use `html`, some use `body`
    $('html, body').stop().animate({ scrollTop : offset }, 1000);
});

ここにデモがあります：http://jsfiddle.net/wCgA7/1/

position:fixedナビゲーションを指定すると、ビューポートの上部にドッキングできることに注意してください。

于 2012-03-15T19:42:33.350 に答える
0

scrollTo プラグインを探します。http://flesler.blogspot.com/2007/10/jqueryscrollto.html

于 2012-03-15T19:41:46.050 に答える
0

「次の」メニューについては、固定配置をご覧ください。CSSposition: fixed要素は常に

スクロール後、ビューポートに対して同じ場所に留まる

于 2012-03-15T19:42:28.450 に答える
0

私はこのJQueryコードの修正版を使用しています：

// animate to anchor link
$('nav a').click(function() {
   $('nav li').removeClass('selected');
   $(this).parent().addClass('selected');
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 500);
   return false;
});  
// update active links on scroll
$(window).scroll(function(){
    var pos = $(window).scrollTop();
    var height =  $(window).height();

    $('nav li').each(function(){
        if( ( pos >= $(this).offset().top )){
            $('nav li').removeClass();
            $(this).addClass('selected');                  
        }
    });
});
于 2012-03-15T19:54:13.763 に答える