单击href`#`时更改书签的url

Question

我通过这次点击在页面内移动

<a class="nav-link" href="#news">News</a>

<section id="news" class="works">

如果我点击链接，我可以移动到该部分。

或直接输入example.com/#news 即可。

但在第一种方法中，网址不会更改为example.com/#news，而是example.com/

所以书签是不可能的。

移动herf #时如何更改网址？

发现js有干扰，请问可以加一句改url吗？？

on('click', '#navbar .nav-link', function(e) {
    let section = select(this.hash)
  
    if (section) {
      e.preventDefault()
      
      let navbar = select('#navbar')
      let header = select('#header')
      
      let sections = select('section', true)
      let navlinks = select('#navbar .nav-link', true)
 
      navlinks.forEach((item) => {
        item.classList.remove('active')
      })

      this.classList.add('active')

      if (navbar.classList.contains('navbar-mobile')) {
        navbar.classList.remove('navbar-mobile')
        let navbarToggle = select('.mobile-nav-toggle')
        navbarToggle.classList.toggle('bi-list')
        navbarToggle.classList.toggle('bi-x')
      }

      if (this.hash == '#header') {
        header.classList.remove('header-top')
        sections.forEach((item) => {
          item.classList.remove('section-show')
        })
        return;
      }

      if (!header.classList.contains('header-top')) {
        header.classList.add('header-top')
        setTimeout(function() {
          sections.forEach((item) => {
            item.classList.remove('section-show')
          })
          section.classList.add('section-show')

        }, 350);
      } else {
        sections.forEach((item) => {
          item.classList.remove('section-show')
        })
        section.classList.add('section-show')
      }

      scrollto(this.hash)
    }
  }, true)

Answer 1

也许你可以考虑在onclick事件中调用history.replaceState()函数来改变浏览器中的url？