Guide on achieving a seamless scrolling effect to an identifier following the selection of a hyperlink from a different webpage

Question

Guide on achieving a seamless scrolling effect to an identifier following the selection of a hyperlink from a different webpage

Imagine you have a link on a webpage,

<a href="https://example.com/#sample"><p>Click Me</a>

When you click on that link, it immediately jumps to the specified id on the page. But what if instead of this abrupt jump, you want the page to smoothly scroll from the top to the id?

Another issue arises when there is a sticky menu overlapping the target id after the jump, adding more importance to the smooth scrolling solution.

If coding in jQuery isn't your forte, seeking help for this functionality may be necessary.

EDIT The initial wording might've caused confusion. The actual scenario involves a link on one page leading to an id on another page:

Let's say the Homepage contains the following link:

<a href="https://example.com/anotherPage/#sample"><p>Click Me</a>

The desired smooth-scrolling effect should take place on the "anotherPage," where the target id resides.

Your understanding of the requirement has been key in finding a suitable solution. Thank you to everyone offering their assistance.

jquery html css

Answer 1

Answer №1

With just a few lines of jQuery, smooth scrolling to elements with anchors is made easy.

Simply use $('a[href*=\\#]') to target all anchor tags (<a>) with a hash symbol (#).

$(document).ready(function() {
    $('a[href*=\\#]').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
            scrollTop : $(this.hash).offset().top
        }, 500);
    });
});

Update

If you want to implement smooth scrolling on a new page, include the following code within that page:

$(document).ready(function() {
    if (window.location.hash) {
        var hash = window.location.hash;
        $('html, body').animate({
            scrollTop :  $(hash).offset().top
        }, 500);
    };
});

This code will check for a hash in the URL and smoothly scroll to the element with the corresponding id.

Note 1: You can adjust the animation speed by modifying the 500 parameter which represents the time in milliseconds.

Note 2: Additionally, you can specify an easing type after the speed parameter. The default is swing (similar to CSS's ease-in-out), but you can change it to linear or another option of your choice.

Answer 2

With just a few lines of jQuery, smooth scrolling to elements with anchors is made easy.

Simply use $('a[href*=\\#]') to target all anchor tags (<a>) with a hash symbol (#).

$(document).ready(function() {
    $('a[href*=\\#]').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
            scrollTop : $(this.hash).offset().top
        }, 500);
    });
});

Update

If you want to implement smooth scrolling on a new page, include the following code within that page:

$(document).ready(function() {
    if (window.location.hash) {
        var hash = window.location.hash;
        $('html, body').animate({
            scrollTop :  $(hash).offset().top
        }, 500);
    };
});

This code will check for a hash in the URL and smoothly scroll to the element with the corresponding id.

Note 1: You can adjust the animation speed by modifying the 500 parameter which represents the time in milliseconds.

Note 2: Additionally, you can specify an easing type after the speed parameter. The default is swing (similar to CSS's ease-in-out), but you can change it to linear or another option of your choice.

Answer 3

Answer №2

To achieve smooth scrolling, you can utilize jQuery's animate function.

For a detailed example, refer to the following link on the w3 schools website: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

$(document).ready(function(){
  // Implementing smooth scrolling for all links
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } 
  });
});

Answer 4

To achieve smooth scrolling, you can utilize jQuery's animate function.

For a detailed example, refer to the following link on the w3 schools website: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

$(document).ready(function(){
  // Implementing smooth scrolling for all links
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });
    } 
  });
});

Answer 5

Answer №3

When it comes to linking to external sources, I have always relied on the following code snippet:

$(document).on("ready", function () {
      var urlHash = window.location.href.split("#")[1];
      $('html,body').animate({
          scrollTop: $('.' + urlHash + ', #' + urlHash +',[name='+urlHash+']').first().offset().top -100
      }, 1000);
  });

Answer 6

When it comes to linking to external sources, I have always relied on the following code snippet:

$(document).on("ready", function () {
      var urlHash = window.location.href.split("#")[1];
      $('html,body').animate({
          scrollTop: $('.' + urlHash + ', #' + urlHash +',[name='+urlHash+']').first().offset().top -100
      }, 1000);
  });

Guide on achieving a seamless scrolling effect to an identifier following the selection of a hyperlink from a different webpage

Answer №1

Update

Answer №2

Answer №3

Similar questions

Feeling lost when it comes to forms and hitting that submit button?

No response text returned from the local Ajax request

Dynamic manipulation of classes based on user attributes

What's causing this failed request in jQuery Deferred to unexpectedly resolve?

Verify if the username and password align by utilizing ajax in codeigniter

Is Flash compatible with Cache-Control & Expires headers across all web browsers?

When a POST request fails, which AJAX event is triggered?

What is the best way to create a table using a for loop?

Function for jQuery Slide Toggle is not being invoked

Passing data to an iframe through Ajax request

The HTML page is not responsive to the screen size of the mobile device

What mobile browsers are compatible with the <track> element for html5 video playback?

The carousel in the Project file seems to be malfunctioning

Problem with a dropdown menu within a dynamically generated table in an HTML/PHP file

Exploring the differences between the meta viewport and font size

Guide for positioning all navbar items except one to the left, beginning at the left edge, utilizing a set minimum and maximum width, while moving the final item to the right edge

After we close the overlay, the YouTube video continues playing without interruption

Even if there is no overflow, the scroll bar will always be visible with the

Angular not firing slide.bs.carousel or slid.bs.carousel event for Bootstrap carousel

Ensuring Consistent Visual Harmony Across Linked Elements