HTML5/jQuery - 垂直頁面滑動

我已經看到他們在頂部有一些鏈接的網站，並且當您單擊示例第一個鏈接時，您將在頁面上向下滾動（向下滾動效果）你點擊了id（＃）。（帶有鏈接的菜單在您後面）。然後，您可以點擊另一個鏈接，然後您將進一步瀏覽頁面。HTML5/jQuery - 垂直頁面滑動

我不能爲這項技術命名，我的垂直頁面滑動搜索沒有返回我所希望的。

Tumblr.com有這樣的事情，只是不完全是我在找什麼。 http://www.w3.org/html/logo也有類似這樣的東西，這裏丟失的唯一東西就是下面的菜單，當頁面滾動時。

誰能幫我解釋一下嗎？或者舉幾個例子？

在此先感謝！

來源

2012-03-15 oliverbj

有你看着，你所看到的網頁的腳本。這應該有助於您構建自己的解決方案。 – 2012-03-15 19:40:13

所有你要做的就是垂直想要的元素的偏移滾動到，然後爲window元素（或您正在滾動的任何元素）設置scrollTop屬性的動畫：

//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-15 19:42:33 Jasper

查找scrollTo插件。 http://flesler.blogspot.com/2007/10/jqueryscrollto.html

來源

2012-03-15 19:41:46 romainberger

對於「以下」菜單，請看fixed positioning。 CSS position: fixed元素總是

保持相對於視同一個地方的，滾動後

DEMO

來源

2012-03-15 19:42:28 paislee

我明白了！非常感謝。一個問題，但。我看到固定項目是..固定的。但是我怎樣才能產生效果，當屏幕變得更高時，固定項目「粘」到頁面的頂部。具有Jquery效果。如果你明白我的意思。 – oliverbj 2012-03-15 19:55:08

我一直在使用這個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-15 19:54:13

HTML5/jQuery - 垂直頁面滑動

回答

相關問題