How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

Question

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

Could someone assist me with a coding issue I am facing? I would like to be able to go to the top of the page when clicking on a link and have the link open in the same tab.

I attempted to implement this functionality using the following code, however, I can only successfully navigate to the top of the page and the link does not open as intended.

Here is my JavaScript code snippet:

$(document).ready(function(){
$('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},1800);
        return false;
    });
});

Below is the HTML link that is causing me trouble:

<a href="./current_page?page=5" class="scrollToTop">&gt;</a>

I would greatly appreciate any assistance or advice on how to resolve this issue. Thank you!

javascript jquery html css

Answer 1

Answer №1

Give this a shot

$(document).ready(function(){
    $('.scrollToTop').click(function(){
        const link = $(this).attr('href');
        $('html, body').animate({scrollTop : 0}, 1800, function() {
            window.open(link);
        });
        return false;
    });
});

Answer 2

Give this a shot

$(document).ready(function(){
    $('.scrollToTop').click(function(){
        const link = $(this).attr('href');
        $('html, body').animate({scrollTop : 0}, 1800, function() {
            window.open(link);
        });
        return false;
    });
});

Answer 3

Answer №2

The click event you have setup is preventing the anchor's href tag from redirecting.

It's important to remember that when changing routes with an anchor, the page will reload at the top of the body every time.

Answer 4

The click event you have setup is preventing the anchor's href tag from redirecting.

It's important to remember that when changing routes with an anchor, the page will reload at the top of the body every time.

Answer 5

Answer №3

One way to accomplish this task is by using JavaScript to handle page navigation after the scroll-to-top animation finishes.

To achieve this, you can update the browser's location in the .promise().done( .. ) callback function following a click event on a specific link:

$(document).ready(function() {

  $('.scrollToTop').click(function() {

    /* Get the href value from the clicked link */
    const href = $(this).attr('href');

    $('html, body').animate({
        scrollTop: 0
      }, 1800)
      .promise()
      .done(function() {

        /* Once the animation is complete, navigate to the link's href */
        location = href;

        console.log(`Navigate: ${href} (this won't work in a stack overflow sandbox)`);
      });

    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<a href="./current_page?page=5" class="scrollToTop">Scroll to top, then navigate &gt;</a>

Answer 6

One way to accomplish this task is by using JavaScript to handle page navigation after the scroll-to-top animation finishes.

To achieve this, you can update the browser's location in the .promise().done( .. ) callback function following a click event on a specific link:

$(document).ready(function() {

  $('.scrollToTop').click(function() {

    /* Get the href value from the clicked link */
    const href = $(this).attr('href');

    $('html, body').animate({
        scrollTop: 0
      }, 1800)
      .promise()
      .done(function() {

        /* Once the animation is complete, navigate to the link's href */
        location = href;

        console.log(`Navigate: ${href} (this won't work in a stack overflow sandbox)`);
      });

    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<h1>Scroll past</h1>
<a href="./current_page?page=5" class="scrollToTop">Scroll to top, then navigate &gt;</a>

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

Answer №1

Answer №2

Answer №3

Similar questions

AngularJS extension known as 'ngclipboard'

I am having trouble getting the graph to display using PHP and MySQL on Fusion Charts

Eliminate border around image link

Display issue with loading animation

Converting an Image to Memory Stream in JavaScript

Attempting to transfer information from a JSON file to a Netflix-inspired platform

Angular encountered an issue with an HTTP POST request, as the 'Access-Control-Allow-Origin' header was not found on the requested resource

By employing the actions class for scrolling to the bottom of the page, inadvertently clicking on another element triggers an unintended right-click context menu to appear

Unable to load the CSS file

Can someone please explain the distinction between $http.get() and axios.get() when used in vue.js?

What is the best way to align a text element to the right and a PNG element to the left within a

Reveal Password Feature in Angular After User Click

Determine which checkbox is currently selected in Vue and send corresponding data based on the checked status

Meteor: How to upload an image file by utilizing the FileReader on the client side and Npm requiring "fs" on the server side

Discovering and editing a specific line in Sheets: An in-depth look at the Message Counter

Is there a method to streamline the code by utilizing a numeric array?

PHP data is not displayed by Ajax

Is there a way to include multiple TinyMCE editors with unique configurations for each one?

Creating a dynamic dropdown list with PHP and AJAX using JQuery

Is there a way to transform the SmartyStreets' jQuery.LiveAddress plugin into its JavaScript SDK?