使用 javascript 将元素正确滚动到页面顶部

Question

我想做的是在 url 包含某个词的情况下将某个元素滚动到顶部来呈现我的页面。我已经能够通过以下方式成功提取 url：

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

但是，在让页面呈现并滚动到顶部的特定元素方面，我正处于十字路口...有什么建议吗？

更新 - 这是我当前的逻辑：

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

如何获取元素的位置并滚动到那里？

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 中执行此操作，那么浏览器有一个 built-in 功能可以滚动到 ID 与浏览器中的 # 匹配的元素 URL.所以 example.com/page#myid 会滚动到 ID 为 myid 的元素。

Answer 2

您可以通过两种方式做到这一点：

第一种方法：

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

第二种方法：

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

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

使用 javascript 将元素正确滚动到页面顶部

properly scroll element to the top of the page using javascript

javascript

jquery

scroll

element