javascript - 点击后不要滚动到顶部
问题描述
我真的被困住了,虽然我发现了一些技巧和窍门(javascript),但我没有得到它的工作。问题是我有一个外观漂亮且功能强大的可折叠菜单,但是当我单击主要链接(Nederland、Belgie、Frankrijk、Zoeken)时,页面会滚动到顶部。
我宁愿不使用 javascript onclick 解决此问题,因为出于 SEO 的目的,我想保持“href”链接完整。
我希望你们和女孩们能帮助我,将不胜感激!
<ul class="mainMenuA">
<li class="item" id="nl">
<a href="#nl" class="btnA"><span class="flag flag-nl"></span> Nederland</a>
<div class="subMenu">
<a href="/amsterdam">Amsterdam</a>
<a href="/arnhem">Arnhem</a>
<a href="/utrecht">Utrecht</a>
</div>
</li>
<li class="item" id="be">
<a href="#be" class="btnA"><span class="flag flag-be"></span> België</a>
<div class="subMenu">
<a href="/item1">item-1</a>
<a href="/item2">item-2</a>
</div>
</li>
<li class="item" id="fr">
<a href="#fr" class="btnA"><span class="flag flag-fr"></span> Frankrijk</a>
<div class="subMenu">
<a href="/item1">item-1</a>
</div>
</li>
<li class="item">
<a href="#search" class="btnA"><i class="fas fa-search"></i>Zoeken</a>
</li>
</ul>
<style>
a:hover {
color:white;
font-weight:bold;
}
.mainMenuA{
width: 250px;
display: block;
border-radius: 10px;
overflow: hidden;
list-style: none;
font-weight:normal;
}
.item{
border-top: 1px solid #ef584a;
overflow: hidden;
}
.btnA{
display: block;
padding: 15px 20px;
background-color: #ff4a52;
color: #fff;
position: relative;
}
.btnA:before{
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right:8px solid transparent;
border-top:10px solid #ff4a52;
right: 15px;
bottom: -10px;
z-index: 9;
}
.btnA i {
margin-right: 10px;
}
.subMenu{
background: #273057;
overflow: hidden;
transition: max-height 0.7s;
max-height: 0;
}
.subMenu a{
display: block;
padding: 15px 20px;
color: #fff;
font-size: 14px;
border-bottom: 1px solid #394c7f;
position: relative;
}
.subMenu a:before{
content: '';
opacity: 0;
transition: opacity 0.3s;
}
.subMenu a:hover:before{
content: '';
position: absolute;
height: 0;
width: 6px;
left: 0;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-left: 11px solid #ffffff;
border-bottom: 24px solid transparent;
}
.subMenu a:after{
content: '';
opacity: 0;
transition: opacity 0.3s;
}
.subMenu a:hover:after{
content: '';
position: absolute;
height: 0;
width: 6px;
right: 0px;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-right: 11px solid #ffffff;
border-bottom: 24px solid transparent;
}
.subMenu a:hover{
background: #273057;
background: -moz-linear-gradient(top, #273057 0%, #273057 50%, #394c7f 51%, #394c7f 100%);
background: -webkit-linear-gradient(top, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
background: linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#273057', endColorstr='#394c7f',GradientType=0 );
transition: all 0.3s;
border-bottom: 1px solid #394c7f;
}
.subMenu a:last-child{
border:none;
}
.item:target .subMenu{
max-height: 1000em;
}
</style>
解决方案
感谢您的快速回复。抱歉,我不清楚,我将它与 jquery、fontawesome 和 bootstrap 4 一起使用。目标是在单击 # 行为时禁用浏览器功能,但不将 onclick 功能用于 SEO 目的。
此外,在这个主题中,这正是我所需要的,但我无法让它在我的情况下工作......当点击触发 JavaScript 的链接时,如何阻止网页滚动到顶部?
推荐阅读
- vb.net - 如何在 VB.NET 中创建 JSON 对象
- coldfusion - 我们可以在基于脚本的样式中使用具有位置属性的 cfparam 吗?
- appium - 如何停止出现默认启动消息
- javascript - vue2-google-map 加载库失败
- apache-spark - 将 spark_sklearn 与 Kubernetes 集群一起使用
- sql-server - 许多停止和启动设备的许多日期之间的日期差异(工作时间)
- excel - 以不同的时间间隔对时间进行分类
- c# - 我应该如何/在 xaml 中的哪个位置放置一个部分,以便不会为每个标签重复托盘图标?
- mysql - 预期有 4 个值,但找到 33 个。(在位置 300 的“(”附近)
- android - 琥珀色和绿色之间 1 像素宽