Question

我想要做的是，如果网址包含某个字词，则会将我的网页设置为滚动到顶部。我已经能够使用以下内容成功提取网址：

  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中执行此操作，则浏览器具有内置功能，可以滚动到具有与浏览器URL中的＃匹配的ID的元素。因此，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正确滚动元素到页面顶部

2 个答案: