正確使用javascript滾動元素到頁面頂部使用javascript

Question

我想要做的是呈現我的頁面滾動到頂部的某個元素，如果URL包含某個單詞。我已經能夠用下面的提取成功的網址：

if(window.location.href.indexOf("Awesome") > -1) { 
    alert('hey, your url has Awesome in it!') 
    }; 

但是我在一個十字路口在得到頁面滾動到頂部的特定元素來渲染方面...... 有什麼建議？

UPDATE - 這裏是我目前的邏輯：

window.addEventListener('load', function(){ 

    (function(){ 

    function goto(id) { 
     var elem = document.getElementById(id); 
     window.scrollTo(0, elem.getBoundingClientRect().top); 
    } 

    if(window.location.href.indexOf("Awesome") > -1) { 
     goto('full--stop'); 
    }; 
    })(); 

Answer 1

您可以通過兩種方式來實現：

第1種方法：

$('html, body').animate({ 
    scrollTop: $("#your element ID").offset().top 
}, 2000); 

第二個方法：

<div id="myDiv"></div> 

location.href = "#"; 
location.href = "#myDiv"; 

Answer 2

如何獲取元素的位置和滾動呢？

function goto(id) { 
 
    var elem = document.getElementById(id); 
 
    window.scrollTo(0, elem.getBoundingClientRect().top); 
 
} 
 
goto('three');

<button onclick="goto('two')">Go to two</button> 
 
<button onclick="goto('three')">Go to three</button> 
 
<div id="one">One</div> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
<div id="two">Two</div> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
<div id="three">Three</div> 
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

---

此外，如果你不想做的JavaScript，然後瀏覽器有一個內置的功能，滾動到元素其ID與瀏覽器URL中的＃匹配。因此，example.com/page#myid將滾動到ID爲myid的元素。