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或其他东西阻止脚本运行），则不会有任何故障恢复。

使用平滑滚动而不在状态栏上显示链接

1 个答案: