Question

嘿，我有一个小问题。现在，我的导航栏将我带到页面上的各个部分。我使用id将标签连接到特定部分进行了操作。我可以在URL上看到带有部分名称的＃char，例如：

http://orelhindi.s3-website.us-east-2.amazonaws.com/#skills

有没有办法让它消失？

  <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>

非常感谢！

Answer 1

从技术上讲，是：How to modify the URL without reloading the page?。或者，您需要使用JavaScript实现滚动，这会使您的生活稍微困难一些。

＃很有用，如果有人共享链接，则任何人单击它都会滚动到页面上的正确位置。

Answer 2

替代鲍勃的答案。您可以使用JS侦听点击，然后将元素滚动到视图中。

将所有href更改为data-section-id
使用JS：查询那些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>

从网址中删除＃个字符

2 个答案: