Javascript 在方形按钮中居中显示图像

我环顾四周，没有任何解决办法。基本上，“返回顶部”按钮不起作用。我只需要它是一个正方形，不允许图标溢出

当页面出于某种原因首次加载时，图标也会显示，但如果向下滚动，然后向上滚动，则图标不再位于顶部

我只需要将图标作为正方形放在按钮中，直到用户向下滚动或当他们位于页面顶部时才会显示

下面是我的代码

window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
if（document.body.scrollTop>20 | | document.documentElement.scrollTop>20）{
document.getElementById（“GlossaryTop”）.style.display=“block”；
}否则{
document.getElementById（“GlossaryTop”）.style.display=“无”；
}
}
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}

#GTop{
显示：无；
位置：固定；
底部：4vh；
右：4vh；
z指数：99；
宽度：10%；
填充：1.25vh 2.5vh；
保证金：0；
显示：内联块；
边界半径：1vh；
框大小：边框框；
颜色：#ffffff；
背景色：#32e591；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
光标：指针；
边框：实心0.5vh#bff442；
}
#悬停{
背景色：#bff442；
边框：实心0.5vh#32e591；
}
格托皮孔先生{
高度：8vh；
显示：块；
位置：绝对位置；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：转换（-50%，-50%）
}

---

您可以将图标设置为背景图像，并使用以下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（）}；
函数滚动函数（）{
if（document.body.scrollTop>20 | | document.documentElement.scrollTop>20）{
document.getElementById（“GlossaryTop”）.style.display=“block”；
}否则{
document.getElementById（“GlossaryTop”）.style.display=“无”；
}
}
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}

#GTop{
显示：无；
位置：固定；
底部：4vh；
右：4vh；
z指数：99；
宽度：10%；
填充：1.25vh 2.5vh；
保证金：0；
显示：内联块；
边界半径：1vh；
框大小：边框框；
颜色：#ffffff；
背景色：#32e591；
背景图像：url（'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/emoji-one/104/upwards-black-arrow_2b06.png');
背景尺寸：包含；
背景重复：无重复；
背景位置：中心；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
光标：指针；
边框：实心0.5vh#bff442；
}
#悬停{
背景色：#bff442；
边框：实心0.5vh#32e591；
}
格托皮孔先生{
高度：8vh；
显示：块；
位置：绝对位置；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：转换（-50%，-50%）
}