Back to Top按钮显示异常及箭头样式修改问题求助

问题1：页面加载时Back to Top按钮默认显示 #

当前代码未设置按钮初始透明度，导致页面加载时按钮默认可见。修改方式如下：

• 在.BTT-button基础样式中添加opacity: 0; pointer-events: none;，初始隐藏按钮并禁止点击
• 在滚动触发的scrollFunction中，显示按钮时同步开启点击事件，隐藏时关闭

问题2：按钮箭头样式不标准 #

替换原有的<字符，用CSS伪元素绘制更可控的粗箭头，样式更统一标准。

修改后的完整代码 #

<script> document.addEventListener('contextmenu', event => event.preventDefault()); </script>
<script> document.onselectstart = () => { event.preventDefault(); } </script>
<style>
 .BTT-button {
 z-index: 20;
 display: flex;
 position: fixed;
 bottom: 1.5vw;
 right: 2rem;
 width: 3rem;
 height: 3rem;
 background: white;
 transition: 0.5s;
 justify-content: center;
 align-items: center;
 border-radius: 21px;
 box-shadow: 1px -2px 6px #766E6E;
 cursor: pointer;
 /* 初始隐藏按钮并禁止点击 */
 opacity: 0;
 pointer-events: none;
 }
 /* 用伪元素绘制粗箭头 */
 .BTT-button::after {
 content: '';
 width: 0.8rem;
 height: 0.8rem;
 border-top: 3px solid #333;
 border-right: 3px solid #333;
 transform: rotate(-45deg);
 }
 html {
 scroll-behavior: smooth;
 }
</style>
<script>
 const topButton = document.createElement('div');
 /* 移除原有的<字符，箭头由伪元素生成 */
 topButton.innerHTML = '<button onclick="topFunction()" class="BTT-button" title="Go to top"></button>'
 document.body.append(topButton);
 let mybutton = document.querySelector(".BTT-button");
 window.onscroll = function () { scrollFunction() };
 function scrollFunction() {
 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 mybutton.style.opacity = "1";
 mybutton.style.pointerEvents = "auto";
 } else {
 mybutton.style.opacity = "0";
 mybutton.style.pointerEvents = "none";
 }
 }
 function topFunction() {
 document.body.scrollTop = 0;
 document.documentElement.scrollTop = 0;
 }
 if (document.querySelector('.whats-app-bubble')) {
 mybutton.style.bottom = '6rem';
 }
</script>
<style> .whats-app-bubble { right: 100px !important; width: 64px !important; } </style>

关键修改说明 #

1. 初始隐藏按钮：在.BTT-button样式中新增opacity:0和pointer-events:none，解决页面加载时按钮显示的问题，同时避免透明状态下误触。
2. 滚动状态控制：在scrollFunction中，显示按钮时设置pointer-events:auto，保证按钮可点击；隐藏时恢复pointer-events:none。
3. 替换箭头样式：移除按钮内的<字符，通过.BTT-button::after伪元素绘制箭头，调整border-top和border-right的宽度（示例中为3px）可以控制箭头粗细，修改border-color可以调整箭头颜色，样式更标准且易于修改。

内容的提问来源于stack exchange，提问作者user16083620