向下滾動到內容而不更改頁面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

回答

相關問題