使用锚标签更新网址而不跳转到标签答案

【问题标题】：update url with anchor tag without jumping to tag使用锚标签更新网址而不跳转到标签
【发布时间】：2018-08-16 23:20:41
【问题描述】：

我制作了这个自动 url 锚标记脚本，它生成一个指向该站点的链接并跳转到获取该 url 的文章。它工作正常，但是当我滚动过标题并更新 url 时，它会捕捉到锚标记。所以我的问题是，是否有可能让它不捕捉，就像正常滚动一样（测试 sn-p）

    var url = "";
    var anchor = "";
    var element1 = "";
    var element2 = "";
    $(document).ready(function () {
        url = window.location.href;
    });
    
    $(function () {
        $(window).scroll(function () {       
            var findMiddleElement = (function (docElm) {
                var viewportHeight = docElm.clientHeight,                   
                    elements = $('.subheading');
                return function (e) {
                    var middleElement;
                    if (e && e.type == 'resize')
                        viewportHeight = docElm.clientHeight;
                    elements.each(function () {
                        var pos = this.getBoundingClientRect().top;
                        if (pos > viewportHeight / 2.5 && pos < viewportHeight / 1.5) {
                            middleElement = this;
                            return false;
                        }
                    });

                    element1 = middleElement;
                    if (element1 != element2) {
                        element2 = element1;
                        anchor = $(middleElement).text();
                        if (anchor != "") {                            
                            window.location.href = url + "#" + anchor;
                        }                            
                    }                                        
                }
            })(document.documentElement);
            $(window).on('scroll resize', findMiddleElement);            
        });
    });

p{
padding: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='subheading'><a name='test1'/>test1</p>
<p class='subheading'><a name='test2'/>test2</p>
<p class='subheading'><a name='test3'/>test3</p>
<p class='subheading'><a name='test4'/>test4</p>
<p class='subheading'><a name='test5'/>test5</p>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

类似this

我改变了这个，以便运动更顺畅：

if (anchor != "") {
  $([document.documentElement, document.body]).animate({
    scrollTop: $(middleElement).offset().top - 100
  }, 1000);
}

-100 是一个小偏移量，因为它会一直滚动直到它到达末尾。您可以计算出确切的数字等。但这就是想法。

【讨论】：