Javascript 如何防止隐藏按钮阻止链接被单击

我正在使用下面的代码添加一个“返回顶部”按钮，该按钮在滚动过页面上的某个点后出现。问题是这个按钮阻止了我的CTA按钮被点击到手机页面的顶部，因为即使它被隐藏了，它仍然在那里。我发现这是因为我使用的是“z-index:10”，但如果我删除了它，那么页面上其余内容下就会出现“返回顶部”按钮

如何确保按钮在隐藏时不会阻止任何其他内容，或在滚动到某个点之前将其从页面中完全删除？这在js中是可能的吗？如果可能的话，我希望避免使用jquery

myID=document.getElementById（“myID”）；
var myScrollFunc=函数（）{
var y=window.scrollY；
如果（y>=700）{
myID.className=“底部菜单显示”
}否则{
myID.className=“底部菜单隐藏”
}
};
addEventListener（“滚动”，myScrollFunc）
.bottom菜单{
位置：固定；
底部：0；
z指数：10；
过渡：所有1；
}
.隐藏{
不透明度：0；
左-100%；
}
.表演{
不透明度：1；
左：0；
}
.粘性divi按钮{
颜色：#ffffff；
字体系列：“机器人”；
字号：18px；
背景色：#f5a623；
边界半径：30px；
字母间距：0.8px；
文本转换：大写；
文字装饰：无；
盒影：0px25px28px-21pxRGBA（194180190,1）；
左侧填充：30px！重要；
右边填充：30px！重要；
填充：20px 3%；
z指数：10；
位置：固定；
底部：40px；
右：40px；
}
@介质（最大宽度：767px）和（最小宽度：0px）{
.粘性divi按钮{
底部：10px！重要；
右：10px！重要；
}
}

<<<<<
<<
<<












答案很简单，只需添加
指针事件：无到css（处于隐藏状态）。它将阻止与元素的任何交互，允许您“点击”该元素：
 我修改了css结构


myID=document.getElementById（“myID”）；
var myScrollFunc=函数（）{
var y=window.scrollY；
如果（y>=700）{
myID.classList.add（“show”）；
}否则{
myID.classList.remove（“show”）；
}
};
addEventListener（“滚动”，myScrollFunc）
.bottom菜单{
位置：固定；
左-100%；
底部：0；
z指数：10；
过渡：所有1；
}
.bottomMenu.sticky divi按钮{
右图：-100%；
}
.bottomMenu.show.sticky divi按钮{
右：2%；
}
.粘性divi按钮{
颜色：#ffffff；
字体系列：“机器人”；
字号：18px；
背景色：#f5a623；
边界半径：30px；
字母间距：0.8px；
文本转换：大写；
文字装饰：无；
盒影：0px25px28px-21pxRGBA（194180190,1）；
左侧填充：30px！重要；
右边填充：30px！重要；
填充：20px 3%；
z指数：10；
过渡：所有1；
位置：固定；
底部：40px；
右：40px；
}
@介质（最大宽度：767px）和（最小宽度：0px）{
.bottomMenu.sticky-divi-button{
底部：10px！重要；
}
.bottomMenu.show.sticky divi按钮{
右：10px！重要；
}
}

<<<<<
<<
<<













如何从
中删除
z-index
。粘贴divi按钮
，然后将
z-index:10
添加到
。显示
和
z-index:0
到
。隐藏
？或者
指针事件：无
指向
。隐藏
。多么聪明的解决方案，非常感谢！这就解决了问题。