2

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

我找不到这种技术的名称，我在垂直页面滑动上的搜索没有返回我希望的结果。

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 回答