Change url for bookmarking when clicking href `#`

Question

I move inside the page with this click

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

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

If I click the link I can move to the section.

Or type directly example.com/#news it works.

But in first method, url dosn't change to example.com/#news it is example.com/

So bookmark is not possible.

How can I change url when moving herf #?

I realized that js is interfering, but is it possible to add some sentence to change 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)

Does this answer your question? [Is there any way to bookmark or link to a section of a page without an anchor?](https://stackoverflow.com/questions/7983290/is-there-any-way-to-bookmark-or-link-to-a-section-of-a-page-without-an-anchor) — Jeff B, May 28 '21 at 15:20
"But in first method, url dosn't change to example.com/#news it is example.com/" — All else being equal: It does. Maybe you have some JS interfering. — Quentin, May 28 '21 at 15:37
I found out that JS is interfering. I have been confused. so I updated the problem. — whitebear, May 28 '21 at 15:46
Sorry, there is a typo! Corrected : `location.hash=this.hash` - just after `scrollto(this.hash)` — Tino, May 28 '21 at 15:56
Perhaps you mean? - `$(document).on('click', '#navbar .nav-link', function(e) {....` — s.kuznetsov, May 28 '21 at 16:35
@Tino thank you ! `location.hash=this.hash` works for this purpose!! — whitebear, May 28 '21 at 17:36
@whitebear happy to help :) Feel free to vote up the comment ;) — Tino, May 29 '21 at 07:26

score -1 · Answer 1 · answered May 28 '21 at 15:35

-1

maybe you could consider calling history.replaceState() function in the onclick event to change to alter the url in the browser ?

answered May 28 '21 at 15:35

Carl Verret

576
8
21

Change url for bookmarking when clicking href `#`

1 Answers1