Кнопка «вверх» полностью исчезает при прокрутке

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 даст вашему элементу стиль css position:none.none не является допустимым значением для свойства position.

Вы можете увидеть значения позиций здесь -> Позиция CSS

По виду вашего кодавам нужно будет использовать 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>

Предложения:

1. Продолжайте использовать let и const.Не используйте var.Также, используйте const для своих функций.Вы не изменяете содержимое функций в любом месте, поэтому вы можете использовать const вместо let.

2. Добавить анимацию (переход) к scrollTop.