javascript - 方形按钮中的中心图像

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>