Question

我环顾四周，没有任何解决方案。基本上，返回顶部按钮可以起作用。我只需要它是一个正方形，并且不允许图标从其中溢出即可。

由于某些原因第一次加载页面时，也会显示该图标，但是如果向下滚动然后向上备份，它将不再位于顶部。

我只需要图标适合正方形即可显示在按钮内，直到用户向下滚动或位于页面顶部时才显示。

下面是我的代码；

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("GlossaryTop").style.display = "block";
  } else {
    document.getElementById("GlossaryTop").style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

#GTop {
	display: none;
  	position: fixed;
  	bottom: 4vh;
  	right: 4vh;
  	z-index: 99;
    width: 10%;
    padding: 1.25vh 2.5vh;
    margin: 0;
    display: inline-block;
    border-radius: 1vh;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #32e591;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: solid 0.5vh #bff442;
}

#GTop:hover {
  background-color: #bff442;
  border: solid 0.5vh #32e591;
}

.gtopicon {
   height: 8vh;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
   }

<button onclick="topFunction()" id="GTop" title="Go back to the top"><img class="gtopicon" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/emoji-one/104/upwards-black-arrow_2b06.png"></button>

任何帮助将不胜感激。我敢肯定这是一个快速修复，但我只是坚持下去。预先感谢。

Answer 1

您可以将图标设置为背景图像，并使用以下CSS规则来实现所需的功能：

background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/emoji-one/104/upwards-black-arrow_2b06.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;

这是完整的更新代码段：

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("GlossaryTop").style.display = "block";
  } else {
    document.getElementById("GlossaryTop").style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

#GTop {
	display: none;
  	position: fixed;
  	bottom: 4vh;
  	right: 4vh;
  	z-index: 99;
    width: 10%;
    padding: 1.25vh 2.5vh;
    margin: 0;
    display: inline-block;
    border-radius: 1vh;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #32e591;
    background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/emoji-one/104/upwards-black-arrow_2b06.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: solid 0.5vh #bff442;
}

#GTop:hover {
  background-color: #bff442;
  border: solid 0.5vh #32e591;
}

.gtopicon {
   height: 8vh;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
   }

<button onclick="topFunction()" id="GTop" title="Go back to the top"></button>

方形按钮居中放置图像

1 个答案: