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>

，当我单击按钮时，我想滚动到屏幕顶部，但是它不起作用。我需要使用香草javascript查找解决方案。

Answer 1

问题在于您的内容具有CSS position:absolute设置，将其放入与主文档分开的单独层中。分层的内容独立于主文档“流”滚动。

在HTML和JavaScript中，您还有一个额外的</button>，变量称为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>

Answer 2

如果为此使用锚点没有问题，则可以使用

<style>
.wrap {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
.container {
    height: 1280px;
    overflow-y: scroll;
}
.scroll-top-btn {
    display: inline-block;
    margin: 40px 0;
    padding: 5px 15px;
    border: 1px solid #777;
    border-radius: 6px;
    text-decoration: none;
    color: #000;
}
</style>
<div class="wrap">
    <div class="container">
        <div id="myText">
            Start<br>Start<br>Start<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
            abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
            abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
            abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
            abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
            abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
            abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
            abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>End<br>End<br>End<br>
        </div>
        <div>
            <a class="scroll-top-btn" href="#myText">Click me To Top</a>
        </div>
    </div>
</div>

滚动到页面顶部

2 个答案: