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

Question

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

当我使用 Smooth Scroll 转到另一个锚点时，#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 或其他原因阻止脚本运行），则不会有任何故障回复。