CODEWITHSUNDEEP
javascriptjqueryjquery-animate
BelroDe
BelroDe

Reputation: 1

jQuery scroll to a section in another page

I'm trying to create a new script with the jQuery library to scroll to a specific id on a page but I have two problems:

  1. I can't delete the href content in the address bar. For example, my link scrolls to a section block with the id anchor-link-section and in my link I have href = "index.php#anchor-link-section". However, in my address bar I see www.site.com/index.php#anchor-link-section.... How can I take it off?

  2. If I'm already on the page where my id is section-scroll, and my href is href="index.php#section-scroll", the page does not scroll, it reloads, to put www.site.com/index.php#section-scroll in my address bar, and then scroll to my id

I am using jQuery 3.3.1 and jQuery UI 1.12.0. I use a url rewriting technology (ex: www.site.com/index)

I have already tried the following:

$(document).ready(function() {
    $('html, body').hide();

    if (window.location.hash) {
        setTimeout(function() {
            $('html, body').scrollTop(0).show();
            $('html, body').animate({
                scrollTop: $(window.location.hash).offset().top
                }, 1000)
        }, 0);
    }
    else {
        $('html, body').show();
    }
});

I don't have a scroll animation, I can't scroll to an id from on a page without having to modify my address bar...

Edit

I updated my code as per suggested by jom:

$(document).ready(function() {
  $('html, body').hide();

  if $(window.location.hash'a[href$="index#lien-ancre-commu"]') {
    setTimeout.click(function (e) { 

      $('html, body').scrollTop(0) e.showpreventDefault(); 

        $('html, body').animate({
          scrollTop: $(window.locationthis.hash).offset().top
      }, 1000)
    }, 01000);
  } else {
    $('html, body').show();
  })
});

But now I no longer have scroll animation but the switch between pages works.

Nav menu code html :

<ul class="nav navbar-nav navbar-right">
              <li><a href="">Accueil</a>
              </li>
              <li><a href="/index.php#lien-ancre-commu">Communauté</a>
              </li>
              <li><a href="/index.php#lien-ancre-contact">Contact</a>
              </li>
              <li><a href="commu">Médias</a>
              </li>
              <li class="dropdown"><a class="fas fa-angle-down" data-toggle="dropdown">Plus</a>
                <ul class="dropdown-menu">
                  <a href="commu">Admin</a>
                </ul>
              </li>
            </ul>

Upvotes: 0

Views: 1628

Answers (1)

Yom T.
Yom T.

Reputation: 9180

A simple Event.preventDefault() should do the trick. By doing this, you won't have to deal with removing the hash part of the URL in address bar — it simply will never get appended in there.

$(document).ready(function (e) {

  if (window.location.hash) {
    scrollToSection(window.location.hash);
  }

});

$('a[href$="#lien-ancre-commu"]').click(function (e) {
  // Tells the browser not to mess with our links or anchor tags
  e.preventDefault();

  // Because we are redefining how it should behave...
  if (this.pathname === window.location.pathname) {
    // ...that is to scroll to a section of the page
    // IF we are on the intended page
    scrollToSection(this.hash);
  }
  else {
    // Otherwise, redirect them to the page
    window.location.replace(this.href);
  }
});

function scrollToSection(id) {
  $('html, body').animate({
    scrollTop: $(id).offset().top
  }, 1000);
}

And with all those in place, you will have your links/anchor tags in the following format:

<a href="/index.php#lien-ancre-commu">Scroll to section</a>

Notice the forward slash character (/), we will need this because adding it means we are redirecting to a URL relative to our application base path instead of another routes relative to current path.

Upvotes: 1

Related Questions