在同一窗口（标签）中打开链接之前，请先转到页面顶部。 如何？

Question

I want to go to top of the page when click on link and then open link in the same tab

I tried to use this code, but I only go to top of the page and link doesnt open

This is my JS

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

And this is my HTML link

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

Please help)

Answer 1

Try this

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

Answer 2

One way to achieve this is to execute page navigation via JavaScript, after the scroll to top animation has completed.

This can be done by navigating the broswer during the .promise().done( .. ) callback, where you'd update the location to the href of the clicked link:

 $(document).ready(function() { $('.scrollToTop').click(function() { /* Obtain href from clicked link element */ const href = $(this).attr('href'); $('html, body').animate({ scrollTop: 0 }, 1800) .promise() .done(function() { /* After animation complete, navigate to link's href */ location = href; console.log(`Navigate: ${href} (won't work in 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 3

Since your click event Is returning false the href tag of your anchor won't redirect.

Note that since you are changing routes through an anchor the loaded page will always start at the top of the body.