手动滚动到锚点时更改URL？

Question

默认情况下,如果我在我的网站上有锚点,那么当我点击一个链接(即www.mysite.com/#anchor)时,地址栏上的URL就会改变

滚动到锚点时,是否可以立即更改地址栏中的URL？或者当我点击一个新锚点时,有一个包含多个锚点的长文档和地址栏上的URL更改？

Answer 1

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

或者,您可以添加"滚动"事件以检查何时到达锚点.

这是一个说明事件的工作小提琴: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;
            }
        });
    });
});