Adjust the current jQuery code to update the URL as the user scrolls

Question

Adjust the current jQuery code to update the URL as the user scrolls

I have a jQuery code from w3schools.com that changes the URL's #id and enables smooth scrolling to a specific DIV section when clicking an <a href="#id"></a>. However, it does not work on scroll. I am looking for a solution where the URL's #id changes as I scroll up or down to a particular section.

Here is the current jQuery Code:

$(document).ready(function(){
  $("#navlist a").on('click', function(event) {
    if(this.hash !== ""){
      var hash = this.hash;
        $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;                
      });
    }
  });
});

I found something on stackoverflow that seems to address the scrolling issue:

$(document).bind('scroll',function(e){
    $('div').each(function(){
        if ($(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10){
            window.location.hash = $(this).attr('id');
        }
    });
});

While this seems to work independently, combining both codes causes one of them to stop functioning. I would like to merge them to achieve both onclick and scroll effects, but my knowledge of jquery is limited.

For example, a URL with ID:

http://localhost/sites/fh/index.php#first

Any help provided will be greatly appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

To prevent forced page scrolling by the browser, it is recommended to change the history state instead of setting the location hash. Here is an example of how you can achieve this:

navlist = [];
$("#navlist a").each(function(i) {
    var thisLink = $(this);
    var thisId = thisLink.attr('href');
    var thisTarget = $(thisId);
    navlist.push({
        'anchor': thisLink,
        'id': thisId,
        'target': thisTarget
    });
    thisLink.on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: thisTarget.offset().top
        }, 800);
    });
});
$(window).on('scroll resize', function(e) {
    $.each(navlist, function(e, elem) {
        var placement = elem.target[0].getBoundingClientRect();
        if( placement.top<window.innerHeight && placement.bottom>0 ) {
            history.pushState({}, '', elem.id);
            console.log('Hash: ' + elem.id);
            return false; /* Exit $.each loop */
        };
    });
});

nav a {
    display: block;
}
section {
    height: 600px;
    border-top: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navlist">
    <a href="#s1">Go to Section 1</a>
    <a href="#s2">Go to Section 2</a>
    <a href="#s3">Go to Section 3</a>
</nav>
<section id="s1">Section 1 Content</section>
<section id="s2">Section 2 Content</section>
<section id="s3">Section 3 Content</section>

Visit this JSFiddle link for a live demo.

Note that Foundation framework users already have Magellan and Bootstrap users have ScrollSpy for similar functionality.

Answer 2

To prevent forced page scrolling by the browser, it is recommended to change the history state instead of setting the location hash. Here is an example of how you can achieve this:

navlist = [];
$("#navlist a").each(function(i) {
    var thisLink = $(this);
    var thisId = thisLink.attr('href');
    var thisTarget = $(thisId);
    navlist.push({
        'anchor': thisLink,
        'id': thisId,
        'target': thisTarget
    });
    thisLink.on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: thisTarget.offset().top
        }, 800);
    });
});
$(window).on('scroll resize', function(e) {
    $.each(navlist, function(e, elem) {
        var placement = elem.target[0].getBoundingClientRect();
        if( placement.top<window.innerHeight && placement.bottom>0 ) {
            history.pushState({}, '', elem.id);
            console.log('Hash: ' + elem.id);
            return false; /* Exit $.each loop */
        };
    });
});

nav a {
    display: block;
}
section {
    height: 600px;
    border-top: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navlist">
    <a href="#s1">Go to Section 1</a>
    <a href="#s2">Go to Section 2</a>
    <a href="#s3">Go to Section 3</a>
</nav>
<section id="s1">Section 1 Content</section>
<section id="s2">Section 2 Content</section>
<section id="s3">Section 3 Content</section>

Visit this JSFiddle link for a live demo.

Note that Foundation framework users already have Magellan and Bootstrap users have ScrollSpy for similar functionality.

Adjust the current jQuery code to update the URL as the user scrolls

Answer №1

Similar questions

Learn the process of invoking componentDidMount each time you switch between ListItems in React

Creating a standalone executable for Node.js without including the entire Node.js framework

AngularJS: How to accurately retrieve the offsetTop value upon page initialization

Sending data between Node.js middleware components

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

Implementing reCAPTCHA and PHP for Email Form Submission

What is the best way to distinguish between an IPFS URL or path (content-addressed) and a regular URL (location-addressed)?

What happens to the XMLHttpRequest when the browser is closed?

Passing arguments from an Angular directive to a controller function within an element's HTML

Utilizing FormHelper in CakePHP to send search query to controller parameter

How to check Internet upload speed in Angular without using a backend server?

What could be causing my function to fail to return the array?

If the font size exceeds a certain value in SCSS, then apply a different value

Is there a way to eliminate the .html extension from the end of URLs for web pages?

Learn how to exchange classes with a hover effect using jQuery

Is it possible to utilize a slot within a Vue.js loop?

Just started working with React and encountered this initial error message in my project

Sending Ajax requests to web services hosted on a dual-node NLB

What is the process for adding tailwind CSS via npm?

Angular 6: A guide to dynamically highlighting navbar elements based on scroll position