我环顾四周,没有任何解决方案。基本上,返回顶部按钮可以起作用。我只需要它是一个正方形,并且不允许图标从其中溢出即可。
由于某些原因第一次加载页面时,也会显示该图标,但是如果向下滚动然后向上备份,它将不再位于顶部。
我只需要图标适合正方形即可显示在按钮内,直到用户向下滚动或位于页面顶部时才显示。
下面是我的代码;
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>
任何帮助将不胜感激。我敢肯定这是一个快速修复,但我只是坚持下去。预先感谢。
答案 0 :(得分: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>