Reading Time: 4 minutes

1,092 Views

Inside this article we will see the concept i.e jQuery Cross Browser Scroll To Top with Animation Tutorial. Article contains the classified information about Scroll to the top of the page using JavaScript / jQuery.

If you are looking for a solution i.e jQuery Smooth Animated Scroll to Top of page Using jQuery / Javascript then this article will help you a lot for this. Tutorial is super easy to understand and implement it in your code as well.

Let’s get started.

Application Programming

Create a folder say smooth-scroll in your localhost directory. Create a file index.html into it.

<!DOCTYPE html>
<html>

<head>
    <title>
        Cross Browser Scroll To Top with Animation
    </title>
    <style>
        .scroll {
            height: 1000px;
            background-color: lightgreen;
        }
    </style>

</head>

<body>
    <h1 style="color: green">
        Cross Browser Scroll To Top with Animation
    </h1>
    <p>Itaque numquam debitis sunt magna dapibus, diamlorem esse, tempor ullamcorper, cupiditate ut nonummy eaque, ex. Luctus, nulla platea, curae accusantium laboriosam distinctio a consequuntur rutrum fusce metus rutrum minus vestibulum, pellentesque aptent
        odio, reprehenderit cupidatat, iure mi tempore cubilia, imperdiet, excepturi cumque. Optio elementum senectus a auctor recusandae, deleniti quisque recusandae, corporis. Tortor ducimus dictumst nascetur, soluta deleniti laoreet commodo, auctor
        quidem aute donec! Tellus sociosqu, risus praesent, illum quidem donec magnam? Pede erat, dolores urna! Suspendisse. In, etiam nostrum diamlorem? Rerum nam sequi architecto natus. Ultrices ipsum enim fringilla quo architecto, dolor netus ridiculus
        irure, fermentum scelerisque ultricies! Ad.</p>

    <!-- Add More Contents Here To See Scroll Effect -->

    <button onclick="scrollToTop()">
      Click to scroll to top
    </button>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


    <script>
        function scrollToTop() {
            $('html,body').animate({
                scrollTop: 0
            }, 'slow');
            return false;
        }
    </script>
</body>

</html>

Concept

We added a scroll to top button.

<button onclick="scrollToTop()">
    Click to scroll to top
</button>

We handled, on click event with animation.

function scrollToTop() {
    $('html,body').animate({
        scrollTop: 0
    }, 'slow');
    return false;
}

Application Testing

Open browser and type your application URL:

URL: http://localhost/smooth-scroll/index.html

When you click on Click to scroll to top Button, it will scroll you to top of the page with the animation effect.

We hope this article helped you to learn jQuery Cross Browser Scroll To Top with Animation Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.