Javascript 单击锚定标记时自动转到页面顶部
我有个问题 我将页面滚动到中间。当我单击右侧的a标记以显示Javascript 单击锚定标记时自动转到页面顶部,javascript,html,css,Javascript,Html,Css,我有个问题 我将页面滚动到中间。当我单击右侧的a标记以显示div时,页面将自动滚动到页面顶部。我想防止这种情况发生 请帮忙! 谢谢 我的src代码: -html <div id="container"> <a href="#"> <img onclick="showCustom()"id="setting"src="https://images.unsplash.com/photo157530259766162aae7fe1447? ixlib=rb- 1.2
div
时,页面将自动滚动到页面顶部。我想防止这种情况发生
请帮忙!
谢谢
我的src代码:
-html
<div id="container">
<a href="#">
<img
onclick="showCustom()"id="setting"src="https://images.unsplash.com/photo157530259766162aae7fe1447?
ixlib=rb-
1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</a>
<div id="custom" class="custom-1">
</div>
</div>
-Js
#custom {
position: fixed;
width: 100px;
height: 200px;
right: 20px;
top: 100px;
background-color: white;
transition: 0.8s;
border-radius: 20px;
}
.custom-1 {
right: -150px !important;
}
#setting {
position: fixed;
width: 30px;
z-index: 99;
right: 30px;
top: 50px;
background-color: rgb(255, 255, 255);
padding: 5px;
border-radius: 15px;
}
#container {
background-color:black;
width:100%;
height:2000px;
}
var btnsetting = document.getElementById("setting");
function showCustom() {
var x = document.getElementById("custom");
if (x.className == "" ) {
x.className = "custom-1";
}
else{
x.className = "";
}}
欢迎来到SO
使用JavaScript:Void(0)而不是href
替换
<a href="JavaScript:Void(0);">
<img
onclick="showCustom()"id="setting"src="https://images.unsplash.com/photo157530259766162aae7fe1447?
ixlib=rb-
1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</a>
Ref您应该删除“a”元素,并使用cursor:pointer实现相同的效果
HTML:
在这里展示
是的。。。非常感谢,爱你的裁判
<div id="container">
<img onclick="showCustom()" id="setting" src="https://images.unsplash.com/photo-1575302597661-62aae7fe1447?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<div id="custom" class="custom-1">
</div>
</div>
#custom {
position: fixed;
width: 100px;
height: 200px;
right: 20px;
top: 100px;
background-color: white;
transition: 0.8s;
border-radius: 20px;
}
.custom-1 {
right: -150px !important;
}
#setting {
position: fixed;
width: 30px;
z-index: 99;
right: 30px;
top: 50px;
background-color: rgb(255, 255, 255);
padding: 5px;
border-radius: 15px;
cursor: pointer;
}
#container {
background-color:black;
width:100%;
height:2000px;
}