使用平滑滚动，状态栏上没有链接

Question

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

当我使用平滑滚动到另一个锚时，#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或其他东西阻止了脚本运行)，就不会有任何failback。