如何在单击和滚动按钮时更新window.location.hash? (使用History API)

时间:2018-11-02 13:06:14

标签: javascript jquery scroll window.location

导航:

  • 我正在为包含4个点的站点创建一个导航栏(垂直点导航),当用户将鼠标悬停在其上时,它会展开并使用GSAP时间轴显示链接。
  • 我还在使用历史记录API更新滚动条上的位置哈希(仅与滚动条完美配合),该滚动条使用replaceState方法。

问题:

  • 当用户将鼠标悬停在导航栏上并单击链接时,位置哈希不会更新,而是保持不变(与用户所在的哈希相同)。
  • 我相信它与实际滚动网站的功能有关,但不能动用手指。
  • 我在控制台中也遇到了一个可怕的错误,我进行了一些研究,但只能看到与Angular相关的内容(我并不熟悉)。
      

    (“限制历史记录状态更改以防止浏览器挂起。”

代码:

$(window).on("scroll", checkPosition);

/*
Scroll To Anchor Function
*/

        $('a[href^="#"]').on('click', function(e) {
            e.preventDefault();

            var speed = 800;

            var target = this.hash;
            var $target = $(target);

            if(position != target){

                //Scroll to
                $('html, body').animate({
                    'scrollTop': $target.offset().top
                }, speed, 'swing', function() {
                   //Callback onced finished animating
                });


            } else {
                wiggleElement($(".circle"));
            }

        });

/* 
Update Location Hash
*/
        function checkPosition() {
            var scrolled = $(window).scrollTop();

            $("section").each(function(){
                var section_pos = $(this).offset().top - 100;
                var section_height = $(this).height();

                if (section_pos <= scrolled && section_pos + section_height > scrolled) {
                    position = '#' + $(this).attr('id');

                    if(history.replaceState) {
                        history.replaceState(null, null, position);
                    }
                    else {
                        location.hash = position;
                    }

                    $('.circle').removeClass("current");
                    if (!is_open) {
                        $(position + '_circle').addClass("current");
                    }
                }
            })
        }

提前谢谢。

1 个答案:

答案 0 :(得分:0)

所以我不知道节流是什么,这是我的方式的错误。

我已经限制了checkPosition函数,并且一切正常。

本·阿尔曼(Ben Alman)提供: http://benalman.com/projects/jquery-throttle-debounce-plugin/