Question

我看过网站顶部有一些链接，当你点击第一个链接的例子时，你正在页面上向下滚动（jQuery向下滚动效果）到你点击的id（＃）。（带链接的菜单跟随你）。然后，您可以单击另一个链接，然后您将被带到页面下方。

我无法为这种技术命名，我对垂直页面滑动的搜索没有返回我希望的内容。

Tumblr.com有类似的东西，不完全是我想要的东西。 http://www.w3.org/html/logo也有这样的东西，这里唯一缺少的是当页面滚动时关闭菜单。

任何人都可以帮我解释一下吗？或者举几个例子？

提前致谢！

Answer 1

您只需获取要滚动到的元素的垂直偏移量，然后为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，则可以将其停靠在视口的顶部。

Answer 2

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

Answer 3

对于“关注”菜单，请查看fixed positioning。 CSS position: fixed元素总是

滚动
后，
相对于视口保持在相同位置

DEMO

Answer 4

我一直在使用此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');                  
        }
    });
});

HTML5 / jQuery - 垂直页面滑动

4 个答案: