javascript - 手动滚动到 anchor 时更改 url？

Question

默认情况下，如果我的网站中有 anchor ，则当我单击链接(即 www.mysite.com/#anchor)时，地址栏上的 URL 会发生更改

当我滚动到某个 anchor 时，是否可以立即更改地址栏中的 URL？或者有一个包含多个 anchor 的长文档，当我点击新的 anchor 时，地址栏上的 url 会发生变化？

Answer 1

尝试使用这个 jquery 插件:Scrollorama 。它具有大量很酷的功能，您可以使用 window.location.hash 来更新您的浏览器哈希。

或者，您可以添加“滚动”事件来检查何时到达 anchor 。

这是一个工作 fiddle 来说明该事件:http://jsfiddle.net/gugahoi/2ZjWP/8/ 示例:

$(function () {
    var currentHash = "#initial_hash"
    $(document).scroll(function () {
        $('.anchor_tags').each(function () {
            var top = window.pageYOffset;
            var distance = top - $(this).offset().top;
            var hash = $(this).attr('href');
            // 30 is an arbitrary padding choice, 
            // if you want a precise check then use distance===0
            if (distance < 30 && distance > -30 && currentHash != hash) {
                window.location.hash = (hash);
                currentHash = hash;
            }
        });
    });
});