javascript - jQuery scrollTop - 动画在移动结束时卡住

Question

我使用 jquery 的 scrollTop 函数在不同的 anchor 之间切换时让我的滚动平滑。 首先，这是网址

the problem

这是我的 jquery 脚本

“ziel”只是“target”的德语单词，只是为了让你知道为什么这个变量被称为“ziel”

$(document).ready(function() {
    $('a[href*=#]').bind("click", function(event) {
        event.preventDefault();
        var ziel = $(this).attr("href");

        $('#portraitcontent').animate({
            scrollTop: $(ziel).offset().top
        }, 3000 , function (){location.hash = ziel;});
});
return false;
});

那么我怎样才能获得流畅的滚动效果而不会在动画结束时出现丑陋的跳跃呢？ 有任何想法吗？

我真的不知道该怎么办。花几个小时和那个婊子在一起!

感谢您的建议!

编辑

有了这个新代码:

$(document).ready(function() {
    $('a[href*=#]').bind("click", function(event) {
        event.preventDefault();
        var ziel = $(this).attr("href");
        $('#portrait-entry').animate({
            scrollTop: $(ziel).offset().top - 230
        }, 1500 , function (){

            if(window.history.replaceState){
                window.history.replaceState(null, document.title, ziel); // <--here
            }
        });
});
return false;
});

流畅的滚动效果没有丑陋的跳跃 但是现在 我的 anchor 链接无法正常工作。

请查看the problem - 当您点击“fortbildungen”然后点击“mitgliedschaften”时，它不会向下滚动到 anchor 。 我想我必须做重置或 s.th.就像那样，因为我认为当您在#anchor 页面上时，链接无法正常工作。

我不喜欢 js/jquery。所以也许有人可以给我一个建议。我不知道如何谷歌这种问题。

感谢您的帮助和编辑过的代码，这让我的滚动变得流畅。

Answer 1

仅仅因为你改变了动画回调中的 url 导致丑陋的跳跃。

针对支持 html5 的浏览器的解决方案是使用“window.history.replaceState”来更改 url，而不是直接更改 url。

代码如下:

$(document).ready(function() {
    $('a[href*=#]').bind("click", function(event) {
        event.preventDefault();
        var ziel = $(this).attr("href");

        $('#portraitcontent').animate({
            scrollTop: $(ziel).offset().top
        }, 2500 , function (){

            if(window.history.replaceState){
                window.history.replaceState(null, document.title, ziel); // <--here
            }
        });
});
return false;
});