使用锚标签更新网址，而无需跳转到标签

Question

我已经制作了此自动url锚标记脚本，该脚本生成指向该站点的链接，并跳转到该URL所来自的文章。 它工作正常，但是当我滚动浏览标题并更新网址时，它将捕捉到锚标记。 所以我的问题是，是否有可能使它不捕捉而仅表现为正常滚动（测试代码段）

  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> 

Answer 1

像这样

我对此进行了更改，以使运动更平稳：

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

-100是一个小的偏移量，因为它一直滚动直到到达结尾为止。 您可以弄清楚确切的数字等。但这就是想法。