Reading Time: 5 minutes

1,033 Views

Inside this article we will see the concept i.e JavaScript How To Scroll To Specific Element with Animation Tutorial. Article contains the classified information about How To Scroll To a Specific Position of a Webpage in JavaScript / jQuery.

If you are looking for a solution i.e jQuery Smooth Animated Scroll to any specific location of a webpage 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>
        How To Scroll To Specific Element with Animation in JavaScript
    </title>
    <style>
        .scroll {
            height: 1000px;
            background-color: lightgreen;
        }
    </style>

</head>

<body>
    <h1 style="color: green">
        How To Scroll To Specific Element with Animation in JavaScript
    </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 -->

    <h3 id="scroll_to_me">Scroll To Me</h3>

    <p>Sint quae ornare dolorum, risus pariatur? Saepe est. Tempora erat incididunt urna possimus dui nisl laboris cras amet nobis auctor class. Curae, proident quibusdam, sodales cillum laudantium irure eaque porta! Pharetra soluta platea curae pretium,
        in placerat aliquip, provident ullamcorper, molestias rhoncus? Consequatur porttitor impedit perspiciatis ab ac, sequi natus, dolores? Repellendus facere convallis? Ultrices eget debitis lectus posuere lorem. Corporis quam. Nec provident tellus
        maecenas illo ullamco porttitor mattis vel recusandae mollitia nemo class, placerat per vitae alias dolore, ultrices ut, malesuada, bibendum! Esse, convallis deleniti dictumst rhoncus feugiat, vel torquent unde tempore, itaque amet, dui quam nulla
        turpis.
    </p>

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

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

    <script>
        $(document).ready(function() {
            $([document.documentElement, document.body]).animate({
                scrollTop: $("#scroll_to_me").offset().top
            }, 2000);
        });
    </script>
</body>

</html>

Concept

Specify Element Selector

First you will specify the selector element where you need to scroll. Here, in this example h3 tag is specified with an ID value.

<h3 id="scroll_to_me">Scroll To Me</h3>

Javascript logic to scroll to element

This code triggers when page loads. You can bind with any other javascript events.

$(document).ready(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#scroll_to_me").offset().top
    }, 2000);
});

animate() is a jquery plugin method which scrolls you down with an animation effect.

Application Testing

Open browser and type your application URL:

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

Whenever you load the page, automatically it will scrolls you down with the animation effect.

We hope this article helped you to learn JavaScript How To Scroll To Specific Element 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.