1

我在页面上进行了平滑滚动，但是当滚动到页面上的最后一个锚点时，滚动只是从根本上撞到底部，因为我最后一个 div 的内容不足以填满整个页面，所以很好的缓动消失了.

该函数试图将锚点放在页面顶部，但 div 太短了。

有什么方法可以防止这种情况发生吗？有什么方法可以告诉函数不要撞到底部吗？

非常感谢提前！

http://jsfiddle.net/5FwcT/4/

$('.submenu a').bind('click',function(event){
var $anchor = $(this);

$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top-1}, 1000,'easeInOutExpo');

event.preventDefault();


});

这里的例子：

在此处输入图像描述

4

2 回答 2

1

与提供的 jsfiddle 示例相比，此处的代码段不完整。

不过，我会试试这个：

$('.submenu a').bind('click',function(event){
    var $anchor = $($(this).attr('href'));
    event.preventDefault();
    $('html, body').stop().animate({
        scrollTop: $anchor.offset().top-1}, 1000,'easeInOutExpo');
    });
});

如果没有更多的滚动可做，scrollTop 将完成它的工作，直到由于文档结束而无法再进行滚动。没有更多的滚动可以做，所以如果内容高度（可能你在document.body这里滚动）与滚动条相比太小，window.innerHeight滚动条将非常小，并且不会有足够的滚动来将元素带到视口的最顶部。

我有与固定侧边栏子导航类似的东西。看这里：

$(".side-nav li a").click(function(e){
    e.preventDefault();
    var target = $($(this).attr("href"));
    $("body").animate({
        scrollTop: target.offset().top - 50
    },1500);
});

这会将目标滚动到顶部边缘的视图中，因为我在页面的最顶部使用了一个固定的导航栏。position:fixed当它即将被滚动出视图时，我还将子导航固定到位（css::） 。

于 2013-07-07T15:06:06.690 回答
1

你可以尝试这样的事情：

工作示例

$(function () {
    $('.submenu a').bind('click', function (event) { 
        var $anchor = $(this);
        if ($anchor.attr('href') != "#webservers") { // if href does not = #webservers
            $('html, body').animate({ // animate as usual 
                scrollTop: $($anchor.attr('href')).offset().top - 1
            }, 3000, 'easeInOutExpo');
        }
        if ($anchor.attr('href') == "#webservers") { // if href does = #webservers
            $('html, body').animate({
                scrollTop: $('body').height() - $(window).height() // animate to the body's height minus the window's height, basically the bottom of the page less the height of the window.
            }, 3000, 'easeInOutExpo');
        }
        event.preventDefault();
    });
});
于 2013-08-31T14:26:19.983 回答