向下滚动到内容而不更改页面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。

来源

2016-11-10 Raja O

可能重复[如何去页面上的特定元素？]（http://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page） – nikjohn

那么你试过了什么？ – Justinas

可能重复[在URL中使用无＃的锚点滚动]（http://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url） – GiuServ

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

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

来源

2016-11-10 09:56:56

如果使用href标记url将会改变。您可以使用ID标签的上下链接，你可以使用jQuery $（“＃向上”）。单击

来源

2016-11-10 10:02:45 yucel

$(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>

来源

2016-11-10 10:03:21

我需要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，因为没有必要为它是链接了。

来源

2016-11-10 10:09:42

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

回答

相关问题