嘿,我有一个小问题。现在,我的导航栏将我带到页面上的各个部分。我使用id将标签连接到特定部分进行了操作。 我可以在URL上看到带有部分名称的#char,例如:
有没有办法让它消失?
<div class="menu">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#cv">cv</a></li>
<li><a href="#skills">skills</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
....
<section id="skills" data-aos="fade-right">
<ul>
<li><i class="fab fa-java"></i></li>
<li><i class="fab fa-js-square"></i></li>
<li><i class="fab fa-node"></i></li>
<li><i class="fab fa-angular"></i></li>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-git"></i></li>
<li><i class="fab fa-aws"></i></li>
</ul>
</section>
非常感谢!
答案 0 :(得分:1)
从技术上讲,是:How to modify the URL without reloading the page?。或者,您需要使用JavaScript实现滚动,这会使您的生活稍微困难一些。
#很有用,如果有人共享链接,则任何人单击它都会滚动到页面上的正确位置。
答案 1 :(得分:1)
替代鲍勃的答案。您可以使用JS侦听点击,然后将元素滚动到视图中。
href
更改为data-section-id
a[data-section-id]
元素data-section-id
具有相同ID的元素,然后将其滚动到视图中值得一提的是scrollIntoView的支持。
// When DOM is ready
document.addEventListener("DOMContentLoaded", function() {
// Get all `a` elements with `data-section-id`
document.querySelectorAll("a[data-section-id]").forEach(aElement => {
// Add click event listener
aElement.addEventListener("click", event => {
// Store the element with `id` matching `data-section-id`
const scrollToElement = document.getElementById(event.target.dataset.sectionId);
// If element is not null, scroll to it
if (scrollToElement !== null) {
scrollToElement.scrollIntoView();
}
});
});
});
<div class="menu">
<ul>
<li><a data-section-id="about">About</a></li>
<li><a data-section-id="cv">cv</a></li>
<li><a data-section-id="skills">skills</a></li>
<li><a data-section-id="portfolio">portfolio</a></li>
<li><a data-section-id="contact">contact</a></li>
</ul>
</div>
....
<section id="skills" data-aos="fade-right">
<ul>
<li><i class="fab fa-java"></i></li>
<li><i class="fab fa-js-square"></i></li>
<li><i class="fab fa-node"></i></li>
<li><i class="fab fa-angular"></i></li>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-git"></i></li>
<li><i class="fab fa-aws"></i></li>
</ul>
</section>