Question

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

这是我的jquery脚本

“ziel”只是“目标”的德语单词，只是为了让你知道为什么这个变量被称为“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;
});

平滑滚动工作没有丑陋的跳跃但目前我的锚链不按照他们应该的方式工作。

请检查the problem - 当您点击“fortbildungen”然后点击“mitgliedschaften”时，它不会向下滚动到锚点。我想我必须重置或s.th.就像那样，因为我认为当你在#anchor页面上时，这些链接不会起作用。

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

感谢您的帮助和编辑后的代码，这使我的滚动顺利。

Answer 1

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

支持html5的浏览器的解决方案是使用“window.history.replaceState”更改网址而不是直接更改网址。

代码如下：

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

Answer 2

最后我决定删除这个scrollTop代码并切换到 jQuery.scrollTo插件与jQuery.localScroll结合使用。

只是为了让你知道

jQuery scrollTop - 移动结束时动画卡住了

2 个答案: