向下滚动到内容而不更改页面URL
问题描述:
<a href="#scrollDown" id="up">Scroll Down</a>
<p>Long Paragraph.</p>
<a name="scrollDown" id="down">Stop Here</a>
虽然我点击ID'向上'它应该向下滚动并停在ID'下'。向下滚动到内容而不更改页面URL
现在,当我点击id'up'时,URL正在改变。例如(../ loginAction#scrollDown)。
如何在不更改页面URL的情况下向下滚动到标识“向下”。 href'scrollDown'不适用于页面URL。
答
您可以通过获取元素的偏移量然后滚动来做到这一点。
var elementPosition = document.getElementById('#myElement').offsetTop;
window.scrollTo(0, elementPosition);
答
如果使用href标记url将会改变。 您可以使用ID标签的上下链接,你可以使用jQuery $(“#向上”)。单击
答
$(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>
+0
我需要JS而不是jQuery。 –
答
URL是不断变化的,因为这是在href的值链接的属性。默认情况下,浏览器正在查找并滚动到具有url散列标识的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
,因为没有必要为它是链接了。
可能重复[如何去页面上的特定元素?](http://*.com/questions/4801655/how-to-go-to-a-specific-element-on-page) – nikjohn
那么你试过了什么? – Justinas
可能重复[在URL中使用无#的锚点滚动](http://*.com/questions/15223006/scroll-with-anchor-without-in-url) – GiuServ