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

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


那么如何在动画结束时不出现难看的跳跃的情况下实现平滑滚动呢?
有任何想法吗?

我真的不知道该怎么办。花那个小时的that子!

感谢您的建议!

编辑

有了这个新代码:

$(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”时,它不会向下滚动到锚点。
我想我必须重设或做某事。这样,因为我认为当您在#anchor页面上时,链接无法正常工作。

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

感谢您的帮助和所编辑的代码,这使我的滚动更加流畅。

最佳答案

仅仅因为您更改了动画回调中的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;
});

07-24 09:38
查看更多