如何解决页面链接不能完美导航
当我点击导航菜单中的其中一个链接时,它会导航到所需页面的下方。
https://www.youtube.com/watch?v=b5FilY-Xsc0&ab_channel=Kisgr%C3%B3foBulib%C3%A1r%C3%B3
https://szipuslinkek.github.io/
由于标题的 position: fixed
和 height: 70px
CSS 规则,我在 .main__top-row 上使用了 70px 边距。我尝试使用填充而不是边距,但没有解决问题。
我该如何解决?
.header {
position: fixed;
width: 100%;
background: var(--primary-color);
height: 70px;
z-index: 1
}
.header__img { height: 70px }
.header__page-title {
position: relative;
bottom: 20px;
color: var(--primary-text-color) !important;
font-size: 30px !important;
font-family: "Times New Roman",serif
}
.header__menu {
position: fixed;
font-size: 20px;
top: 25px;
color: var(--primary-text-color);
padding: 17px 10px;
text-align: center
}
@media (min-width: 768px) {
.header__menu { display: none }
}
.header__menu__item {
display: block;
background: var(--primary-text-color);
color: var(--primary-color);
padding: 2px 10px;
border: 1px solid var(--primary-color)
}
<header class="container header flex-space-between">
<div class="header__img-container">
<img class="header__img img-responsive" src="assets/profile.png" alt="Szipus Alfikah">
</div>
<div class="header__page-title-container">
<h2 class="header__page-title">SzipusLinkek</h2>
<details class="header__menu">
<summary>Menü</summary>
<a class="header__menu__item" href="#streamek">Streamek</a>
<a class="header__menu__item" href="#elerhetosegeim">Elérhetőségeim</a>
<a class="header__menu__item" href="#gyk-linkek">Gyk linkek</a>
<a class="header__menu__item" href="#minecraft-map">Minecraft map</a>
</details>
</div>
<div class="header__img-container">
<img class="header__img img-responsive phone-display-none float-right" src="assets/profile.png" alt="Szipus Alfikah" class="right">
</div>
</header>
解决方法
我不知道我是否正确,但我认为没有 JS 就行不通。您可以使用 JQuery 和下面的代码。
将 JQuery 添加到正文的末尾:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
然后添加:
<script>
$(document).ready(function(){
$('.smoothScroll').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - $("header").outerHeight() + 2 // This line determines the height of the header and subtracts it from the total displacement
},700,"swing"); // The number here represents the speed of the scroll in milliseconds
return false;
}
}
});
});
</script>
对菜单中的所有 <a>
标签添加类 smoothScroll,如下所示:
<a class="header__menu__item smoothScroll" href="#streamek">Streamek</a>
SmoothScroll 函数来自 SO 上的另一篇文章,但现在我不知道来自哪个帖子。 这样做的好处是它可以平稳移动,而不仅仅是跳转到您想要的部分。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。