javascript - 使用状态栏上没有链接的平滑滚动

Question

我为我的大学启动了一个新项目，但我的代码有问题。

当我使用“平滑滚动”转到另一个 anchor 时，状态栏上会显示#name_of_the_anchor 链接。

平滑滚动仅在我使用“a href”时才起作用，因此状态栏将显示每个 div 的链接。

Javascript:

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
        'scrollLeft': $target.offset().left
        }, 400, 'swing');
    });
});

如何更改此代码以不在状态栏上显示链接，但在我的网站上保持平滑滚动？谢谢你们，伙计们!

Answer 1

您可以对链接执行类似的操作:

<a href="javascript:;" data-target="#anchor-name">My Link</a>

然后用 JavaScript 做类似的事情

$(document).ready(function(){
    $('a[data-darget]').on('click', function (e) {
        e.preventDefault();

        var target = $(this).data('target'),
        $target = $(target);

        $('html, body').stop().animate({
           'scrollLeft': $target.offset().left
        }, 400, 'swing');
    });
});

这会阻止默认浏览器行为。但这实际上并不是最好的方法，因为如果 JavaScript 无论如何都无法运行(即，如果用户禁用了 JS 或其他原因阻止了脚本运行)，则不会有任何故障恢复。