Question

我正在尝试在屏幕的右下角放置“转到顶部”按钮。它应该出现在滚动功能上，当我回到顶部时消失。该按钮存在，但是当我向下滚动时，它停留在“主页”上，因此当我滚动更多时，该按钮不再可见。如何解决问题？您可以在这里查看我的代码。提前非常感谢！

window.onscroll = function(){goTop()};

let goTop = function() {

  var rocket = document.querySelector(".go-to-top");
  var scrollExt = document.body.scrollTop;

  if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500){
    rocket.style.display = "block";
  } else{
    rocket.style.position = "none";
  }
    
};

let rocketClick = function() {
  document.documentElement.scrollTop = 0;
}

.go-to-top{
  display: none;
  z-index: 10;
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  transform: rotate(-45deg);
  color: black;
  padding: 10px;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.go-to-top i{
   font-size: 50px;
 }

.go-to-top:hover{
  cursor: pointer;
  text-decoration: none;
}

<!--the rest of markup-->
<div class="rocket">
		<a href="#" class="go-to-top">
			<i class="fas fa-rocket"></i>
		</a>
</div>
<script src="script.js"></script>
<!--closing markup-->

Answer 1

rocket.style.position:none将为您的元素提供position:none的CSS样式。 none不是position属性的有效值。

您可以在此处查看位置值-> CSS position

根据代码的外观，您需要使用display而不是position。

此外，您创建一个变量scrollExt，并且您不使用它。另外，您创建了一个rocketClick函数，但没有在元素上调用它。

window.onscroll = function() {
  goTop();
};

const goTop = function() {
  const rocket = document.querySelector('.go-to-top');
  const scrollExt = document.body.scrollTop;

  if (scrollExt > 500 || document.documentElement.scrollTop > 500) {
    rocket.style.display = 'block';
  } else {
    rocket.style.display = 'none';
  }
};

const rocketClick = function() {
  document.documentElement.scrollTop = 0;
};

main {
  height:1500px;
  background:red;
}
.go-to-top{
  display: none;
  z-index: 10;
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  transform: rotate(-45deg);
  color: black;
  padding: 10px;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.go-to-top i{
   font-size: 50px;
 }

.go-to-top:hover{
  cursor: pointer;
  text-decoration: none;
}

<main></main>
<div class="rocket" onclick=rocketClick()>
		<a href="#" class="go-to-top">
			rocket icon
		</a>
</div>

建议：

继续使用let和const。请勿使用var。另外，对功能使用const。您不会在任何地方更改函数的内容，因此可以使用const代替let。
向scrollTop添加动画（过渡）。

顶部滚动按钮完全消失

1 个答案: