html - 如何使导航栏标志的锚标签锚定“家”?
问题描述
标题基本上说明了一切。
我有一个带有徽标的导航栏,我正在尝试获取它,因此当单击页面时会重定向“主页”并滚动回页面顶部。我对 html 和 CSS 比较陌生,但了解锚定的工作原理,我的其他导航栏锚链接工作正常,我似乎无法弄清楚徽标。
提前致谢!
/*
=================
Navbar
=================
*/
#home {
position: sticky;
top: 0;
z-index: 2;
}
.menu {
background-color: #fffffff6;
width: 100%;
padding: 10px 64px;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}
.links {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.links img {
max-width: 7rem;
cursor: pointer;
margin-right: auto;
/* This pushes the logo to the left side of the page */
}
.links li {
padding: 15px 0;
cursor: pointer;
}
.links li.items {
position: relative;
width: auto;
margin: 0 25px;
text-align: center;
order: 3;
}
/* Navbar Under Bar */
.links li.items .nav-words:after {
position: absolute;
content: '';
left: 0;
bottom: 5px;
height: 1.5px;
width: 100%;
background: var(--c-primary2);
opacity: 0;
transition: all 0.2s linear;
}
.links li.items .nav-words:hover:after {
opacity: 1;
bottom: 8px;
}
.links li a {
font-weight: 400;
color: var(--h-text);
font-size: 1rem;
letter-spacing: .05rem;
text-decoration: none;
transition: .4s;
}
.links button {
width: 7.6rem;
height: 2.4rem;
background: var(--main-gradient);
border: 1px solid #e4e4e4;
border-radius: 35px;
transition: all 0.2s ease 0s;
cursor: pointer;
outline: none;
}
.links button a {
color: var(--white);
}
.links button:hover {
box-shadow: 0px 12px 10px -10px rgba(0, 0, 0, 0.3)
}
.links li .nav-words:hover {
color: var(--c-primary2);
}
.links li.ham-btn {
display: none;
}
.links li.ham-btn.hide i:before {
content: '\f00d';
}
<!-- Navbar -->
<section id="home">
<header class="menu">
<ul class="links">
<!-- Logo -->
<a href="#home"><img class="logo" src="img/central-gardens-logo.png" alt="logo"></a>
<!-- Words -->
<li class="items"><a class="nav-words" href="#about">About</a></li>
<li class="items"><a class="nav-words" href="#services">Services</a></li>
<li class="items"><a class="nav-words" href="#amenities">Amenities</a></li>
<li class="items"><a class="nav-words" href="#career">Careers</a></li>
<li class="items"><a class="nav-words" href="faq.html" target="_blank">FAQ</a></li>
<!-- Button -->
<li class="items">
<button>
<a href="#contact">Contact</a>
</button>
</li>
<!-- Hamburger Button -->
<li class="ham-btn">
<a class="nav-words" href="#">
<i class="fas fa-bars"></i>
</a>
</li>
</ul>
</header>
</section>
解决方案
只需添加一个“#”作为链接即可将您带到页面顶部,而无需添加#home
<!-- Logo -->
<a href="#"><img class="logo" src="img/central-gardens-logo.png" alt="logo"></a>
推荐阅读
- ios - Swift:跟踪一组 API 调用以显示进度条
- python - 使用 docker 执行多个 python 脚本
- python - 使用 Selenium-PYTHON 打开搜索结果
- c - 确定有序索引,但不更改原始数组中的元素
- c# - 如何在 Roslyn 动态编译的代码中引用另一个 DLL
- typescript - 预期在 TSX 中的表达
- performance - Redis 存储大型列表
- autodesk-forge - 作业发布阶段发生意外错误
- xamarin.forms - MVVMCross 文档需要更新以获取最新版本?
- python-3.x - Python3 对多维列表的布尔赋值是错误的?