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 - 垂直页面滑动

回答

相关问题