jQuery滚动到锚点 - ＆gt;但要防止撞到页面底部

Question

我在我的页面上做了一个平滑的滚动，但当滚动到我页面上的最后一个锚点时，滚动只是从根本上颠簸到底部，因为我最后一个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();


});

此处示例：

Answer 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);
});

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

Answer 2

您可以尝试这样的事情：

Working Example

$(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();
    });
});