Question

我拥有的是：

$(document).ready(function(){$('a[href^="#"]').on('click',function(e){e.preventDefault();var t=$(this.hash).offset().top;$('.wrapper').animate({scrollTop:t,},1000)})});

实际上将div放在任何地方作为参考，例如：

<div id="about"></div>

它实际上向下滚动到那些参考点，但我没有看到网址中的名称。当我向下滚动并最终进入about部分时，我希望它以某种方式显示在这里www.site.com/#about

知道我做错了什么吗？使用的网站是HTML文档。

Answer 1

您可以使用Html5历史记录API Good tutorial for using HTML5 History API (Pushstate?)

$(document).ready(function() {
  $('a[href^="#"]').on('click',function(e) {
    e.preventDefault();
    var t = $(this.hash).offset().top;
    $('.wrapper').animate({ scrollTop:t }, 1000);
    history.pushState(null, null, location.href + $(this).href); // <- not sure whether your links are relative or absolute.. do change appropriately..
  })
});

Answer 2

试试这个

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        var target = this.hash;
        var t = $(this.hash).offset().top;
        $('.wrapper').animate({
        scrollTop: t,
        }, 1000, function () {
            window.location.hash = target;
        });
    });
});

单页滚动链接不会在网址中显示锚点

2 个答案: