时间戳

首页 > 解决方案 > 方形按钮中的中心图像

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

问题描述

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

该图标确实会在页面由于某种原因首次加载时显示，但是如果您向下滚动然后备份它不再位于顶部。

我只需要将图标作为正方形放入按钮中，并且在用户向下滚动或在页面顶部时才显示。

以下是我的代码；

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>

任何帮助，将不胜感激。我确信这是一个快速修复，但我只是坚持下去。提前致谢。

标签： javascriptjqueryhtmlcss

解决方案

您可以将图标设置为背景图像并使用以下 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>

推荐阅读