单页滚动链接不会在url中显示anker

One page scrolling links dont show anker in url

本文关键字：url 显示 anker 滚动 链接 单页      更新时间：2023-09-26

我拥有的是：

$(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>

它实际上向下滚动到那些参考点，但我在url中看不到名称。当我向下滚动并进入关于部分时，我希望它以某种方式显示为www.site.com/#about

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

尝试一下这个

$(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;
        });
    });
});

您可以使用Html5历史API使用Html5历史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..
  })
});
相关文章：