javascript - 滚动到页面顶部

Question

我有一个类似于下面代码的页面:

var btn = document.getElementById('test')
test.addEventListener("click", function(){
    window.scroll(0,0)
})

.wrap {
  overflow-y: scroll;
  position: absolute;
  left: 0;
  top: 0px;
  right: 0;
  bottom: 0;
}

.container {
  height: 1280px
}
button {
  margin-top: 500px;
}

<div class="wrap">
  <div class="container">
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin consequat massa et rutrum. In vel nulla pulvinar, sagittis ligula nec, pellentesque ligula. Proin ut nisl nec metus pellentesque congue eget tincidunt lectus. Proin nibh felis, vulputate eget vehicula et, viverra et sem. Aenean ornare felis id eros tincidunt rutrum ac eu magna. Nullam eleifend sit amet sapien id commodo. Praesent et est sagittis, vehicula velit ac, vehicula turpis. Aenean vel erat sem. Integer id tellus nisl. Donec interdum aliquam arcu, ac sagittis sem eleifend non. Sed tincidunt, massa a consequat venenatis, diam metus sodales eros, ut rutrum diam sem nec nisi. Vestibulum mattis nisl eu nulla posuere, a porta ante commodo. Duis in mauris ex. Ut a leo suscipit, posuere nulla eget, tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc finibus commodo nisl, sed aliquam odio condimentum in.

Mauris tincidunt neque quis gravida volutpat. Proin mi enim, rutrum a eleifend ut, bibendum non turpis. Curabitur iaculis turpis vitae magna scelerisque lacinia. Suspendisse interdum fringilla ex ut laoreet. Cras convallis leo est, id congue diam fringilla et. Nullam tristique elit in fermentum vestibulum. Vivamus varius vehicula mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a ligula vitae odio scelerisque interdum. Integer sed dui magna. Morbi placerat turpis id sollicitudin mattis.

Praesent pharetra pulvinar diam, in tincidunt turpis tempus eget. Phasellus luctus luctus consectetur. Vivamus tempor tellus eu justo eleifend luctus. Sed euismod at nisi aliquam facilisis. Nam eleifend volutpat lacus eu ornare. Ut fermentum dui eget tortor scelerisque venenatis. Vivamus pretium, justo id feugiat scelerisque, arcu ligula venenatis ante, nec maximus turpis elit et dui. Cras eget risus nulla. Vestibulum feugiat diam non viverra posuere. Nam ex sem, commodo volutpat sodales vel, euismod id sem.

Fusce ultrices semper ligula, quis mattis dolor blandit sit amet. Nulla placerat pharetra sem. Nulla vulputate placerat diam, sit amet convallis elit vulputate sed. Praesent scelerisque est sed orci gravida varius. Aenean non tellus lobortis, pretium nisl ultricies, semper diam. Vivamus non lectus a metus dictum varius. Praesent vehicula sodales sodales. Aliquam et nisi a ipsum viverra mollis. Sed aliquam ac lacus et laoreet. Morbi gravida sem vitae commodo semper. In hac habitasse platea dictumst. Quisque a ultricies sapien. Maecenas condimentum tellus tellus, eget pretium nulla lobortis consequat. Nam posuere malesuada dolor.

Pellentesque malesuada sapien ut sagittis porta. Maecenas eget lorem in nibh tristique euismod pretium at magna. Nulla posuere bibendum consequat. Curabitur pharetra elementum tellus, eget fringilla eros vestibulum quis. Sed varius ac tortor at cursus. Nulla facilisi. Pellentesque non elit vel metus bibendum imperdiet. Nullam venenatis luctus tellus. Maecenas sed molestie risus. Quisque in est in lectus euismod pretium.
    </div>
<div>
<button id="test">
Click me To Top
</button>
</button>
</div>
  </div>
  
</div>

当我单击按钮时，我希望滚动条转到屏幕顶部，但它不起作用。 我需要找到一个使用 vanilla javascript 的解决方案。

Answer 1

问题是您的内容有 CSS position:absolute set，将其放入自己的层，与主文档分开。分层内容独立于主文档“流”滚动。

你还有一个额外的</button>在您的 HTML 和 JavaScript 中，您的变量称为 btn , 但随后您在 test 上设置了您的事件.

删除该指令并更正 JavaScript 变量，它就可以工作了。

document.getElementById('test').addEventListener("click", function(){
    window.scroll(0,0);
})

.wrap {
  left: 0;
  top: 0px;
  right: 0;
  bottom: 0;
}

.container {
  height: 1280px
}
button {
  margin-top: 500px;
}

<div class="wrap">
  <div class="container">
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin consequat massa et rutrum. In vel nulla pulvinar, sagittis ligula nec, pellentesque ligula. Proin ut nisl nec metus pellentesque congue eget tincidunt lectus. Proin nibh felis, vulputate eget vehicula et, viverra et sem. Aenean ornare felis id eros tincidunt rutrum ac eu magna. Nullam eleifend sit amet sapien id commodo. Praesent et est sagittis, vehicula velit ac, vehicula turpis. Aenean vel erat sem. Integer id tellus nisl. Donec interdum aliquam arcu, ac sagittis sem eleifend non. Sed tincidunt, massa a consequat venenatis, diam metus sodales eros, ut rutrum diam sem nec nisi. Vestibulum mattis nisl eu nulla posuere, a porta ante commodo. Duis in mauris ex. Ut a leo suscipit, posuere nulla eget, tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc finibus commodo nisl, sed aliquam odio condimentum in.

Mauris tincidunt neque quis gravida volutpat. Proin mi enim, rutrum a eleifend ut, bibendum non turpis. Curabitur iaculis turpis vitae magna scelerisque lacinia. Suspendisse interdum fringilla ex ut laoreet. Cras convallis leo est, id congue diam fringilla et. Nullam tristique elit in fermentum vestibulum. Vivamus varius vehicula mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a ligula vitae odio scelerisque interdum. Integer sed dui magna. Morbi placerat turpis id sollicitudin mattis.

Praesent pharetra pulvinar diam, in tincidunt turpis tempus eget. Phasellus luctus luctus consectetur. Vivamus tempor tellus eu justo eleifend luctus. Sed euismod at nisi aliquam facilisis. Nam eleifend volutpat lacus eu ornare. Ut fermentum dui eget tortor scelerisque venenatis. Vivamus pretium, justo id feugiat scelerisque, arcu ligula venenatis ante, nec maximus turpis elit et dui. Cras eget risus nulla. Vestibulum feugiat diam non viverra posuere. Nam ex sem, commodo volutpat sodales vel, euismod id sem.

Fusce ultrices semper ligula, quis mattis dolor blandit sit amet. Nulla placerat pharetra sem. Nulla vulputate placerat diam, sit amet convallis elit vulputate sed. Praesent scelerisque est sed orci gravida varius. Aenean non tellus lobortis, pretium nisl ultricies, semper diam. Vivamus non lectus a metus dictum varius. Praesent vehicula sodales sodales. Aliquam et nisi a ipsum viverra mollis. Sed aliquam ac lacus et laoreet. Morbi gravida sem vitae commodo semper. In hac habitasse platea dictumst. Quisque a ultricies sapien. Maecenas condimentum tellus tellus, eget pretium nulla lobortis consequat. Nam posuere malesuada dolor.

Pellentesque malesuada sapien ut sagittis porta. Maecenas eget lorem in nibh tristique euismod pretium at magna. Nulla posuere bibendum consequat. Curabitur pharetra elementum tellus, eget fringilla eros vestibulum quis. Sed varius ac tortor at cursus. Nulla facilisi. Pellentesque non elit vel metus bibendum imperdiet. Nullam venenatis luctus tellus. Maecenas sed molestie risus. Quisque in est in lectus euismod pretium.
    </div>
    <div>
      <button id="test">Click me To Top</button>
    </div>
  </div> 
</div>