Effortlessly glide to a specific div ID upon page load using the URL address

Question

Effortlessly glide to a specific div ID upon page load using the URL address

One way to implement smooth scrolling to an anchor on page load is by using jQuery. Here's an example code snippet:

$(function(){
    $('html, body').animate({
        scrollTop: $( $('#anchor1').attr('href') ).offset().top
    }, 2000);
    return false;
});

I've used this technique numerous times with the onClick event for navigation on vertical websites.

Now, I'm looking for a solution where if a specific URL like
http://www.cooltimes.com/#scrolltoCOOLplace
is accessed, it will automatically scroll smoothly to the #scrolltoCOOLplace section within my site.

This would involve triggering smooth scroll based on the URL address.

Does anyone have suggestions for how to achieve this with jQuery?

javascript jquery css

Answer 1

Answer №1

Try using

var currentPath = document.location.pathname;

within your function and then pass it to the scrollTop method.

$(function(){
var currentPath = document.location.pathname;
    $('html, body').animate({
        scrollTop: $(currentPath.substr(1)).offset().top
    }, 2000);
    return false;
});

Answer 2

Try using

var currentPath = document.location.pathname;

within your function and then pass it to the scrollTop method.

$(function(){
var currentPath = document.location.pathname;
    $('html, body').animate({
        scrollTop: $(currentPath.substr(1)).offset().top
    }, 2000);
    return false;
});

Effortlessly glide to a specific div ID upon page load using the URL address

Answer №1

Similar questions

Dynamic content loading using AJAX to selectively update a designated section

Hover functionality for picture

Enhancing navigation functionality using CSS

Adjust the width of a box-shadow using percentage values in CSS

Updating a singular value in an array using jQuery/JavaScript

What is a clear indication that a <div> is filled with text?

What's the best way to include various type dependencies in a TypeScript project?

Testing the material-ui toggle component by simulating a click event

Obtain information through ajax using an asynchronous function

Utilizing jQuery Autocomplete to access JSON data via an API

Guide on sending JSON data to a server and receiving JSON/XML in response with JSP

Uploading an image via Chrome and transferring it to a server using PHP: a step-by-step guide

Tips for stopping slide transition (moving to a different slide) in vue-slick-carousel?

Prevent the event from bubbling up on active elements

What is the best way to transfer an ID to a dropdown selection list?

Is there a way to define the route path when using MemoryRouter in Jest without using location or history objects?

What is the best way to renew an access token with axios?

Tips on deleting CSS comments from a CSS file

Subclass declaration with an assignment - React.Component

The server cannot process the content type 'application/json;charset=UTF-8' as it is not supported