文章/答案/技术大牛

发布

社区首页 >问答首页 >从url中删除# char

问从url中删除# char
EN

Stack Overflow用户

提问于 2019-01-08 21:49:08

回答 2查看 71关注 0票数 0

嘿我有个小问题。现在我的导航员栏带我去页面上的各个部分。我使用id来完成它，它将a标记连接到特定的部分。例如，我可以看到在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>

非常感谢!

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-01-08 21:54:19

技术上是的：如何在不重新加载页面的情况下修改URL？。或者，您需要在JavaScript中实现滚动，使您的生活稍微困难一些。

这个#很有用，如果有人分享这个链接，点击它的任何人都会滚动到页面上正确的位置。

票数 1

Stack Overflow用户

发布于 2019-01-08 22:24:23

替代鲍勃的答案。您可以使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54100230

复制

相似问题

问从url中删除# char
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从url中删除# charEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从url中删除# char
EN