向下滚动到内容而不更改页面 URL答案

【问题标题】：Scroll Down to content without changing page URL向下滚动到内容而不更改页面 URL
【发布时间】：2017-03-24 06:59:36
【问题描述】：

<a href="#scrollDown" id="up">Scroll Down</a>
<p>Long Paragraph.</p>
<a name="scrollDown" id="down">Stop Here</a>

当我单击 id 'up' 时，它应该向下滚动并停止到 id 'down'。

现在，当我单击 id 'up' 时，URL 正在发生变化。例如（../loginAction#scrollDown）。

如何在不更改页面 URL 的情况下向下滚动到 id 'down'。 href 'scrollDown' 不适用于页面 URL。

【问题讨论】：

How to go to a specific element on page?的可能重复
那么你尝试了什么？
scroll with anchor without # in URL的可能重复
使用向下滚动

标签： javascript html

【解决方案1】：

您可以通过获取元素的偏移量然后滚动到它来做到这一点。

var elementPosition = document.getElementById('#myElement').offsetTop;
window.scrollTo(0, elementPosition);

【讨论】：

【解决方案2】：

如果你使用 href 标签 url 会改变。您可以使用 id 标签进行上下链接，也可以使用 jQuery $('#up').click

【讨论】：

【解决方案3】：

$(function() {
  $('#up').click(function(){
    $('html, body').animate({
        scrollTop: $("#down").offset().top
    }, 2000);
});
  
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a href="javascript:void(0)" id="up">Scroll Down</a>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
  v
  <br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p><br>
<p>Long Paragraph.</p>
















<a name="scrollDown" id="down">Stop Here</a>

</body>

【讨论】：

我需要 JS 而不是 jQuery。

【解决方案4】：

url 正在改变，因为那是链接的 href 属性的值。默认情况下，浏览器会查找并滚动到带有 url 哈希 id 的 div，因此 asdf.com/#someid 将始终显示顶部带有 #someid div 的页面。为避免 url 更改并具有相同的功能，您可以为触发器使用自定义属性。

<p custom-target="scrollDown" id="up">Scroll Down</p>
<p>Long Paragraph.</p>
<a name="scrollDown" id="down">Stop Here</a>

然后你修改你的滚动脚本来监听点击p[custom-target="scrollDown"] 我将触发元素更改为p，因为它不再需要链接。

【讨论】：