HTML Div To Scroll to Another Div

Question

I have 1 Div, "read-more hvr-pulse" and I wish for an event to occur when a User Clicks that DIV. I want it to scroll to another Div which is a login form down the page.

I have attempted a which surrounded the DIV But that caused several issues with the styling, and at the end of the day it did not work. I am reasonably new to JS, so simplicity would be amazing.

The DIV that holds the login is called, "eUser"

Basically I just want the DIV "read-more hvr-pulse" to scroll to "eUser" smoothly. Any Help at all would be appreciated.

HTML

<div class="Main animated fadeIn">
    <!--To make the Site Unique, I have included Several Trailers for the Main Landing Page !-->
    <video autoplay loop poster="polina.jpg" id="bgvid">
        <source src="img/indexMV.webm" type="video/webm">
        <source src="img/indexMV.webm" type="video/mp4">
    </video>
</div>
<!--For Style Purposes, I have wrapped the Login and Register Section of the site in a Container !-->
<div class="eUser">
    <div class="container">
        <div class="login animated bounceInDown" >
            <form class="form-3" action="logreg.php" method="post" accept-charset="utf-8">
                <label>Username: </label><input type="text" name="username" value="" placeholder="Username">
                <br />
                <label>Password: </label><input type="password" name="password" value="" placeholder="Password">
                <br />
                <input class="Login hvr-pulse" type="submit" name="login" value="Login">
                <input class="Register hvr-pulse" type="submit" name="register" value="Register">
            </form>
        </div>
    </div>
</div>
<!-- The code below is The Text for the Landing Page -->
<section class="start-page parallax-background" id="home">
    <div class="content">
    <div class="text">
    <h1>Welcome to our User Login Page. Please Select Your User Type</h1>
    <hr/>
    <div class="read-more hvr-pulse">New User</div>
    <div class="eUser hvr-pulse">Existing User</div>
    <div class="Admin hvr-pulse">Admin</div>
</section>

Answer 1

You can use .animate jQuery function

HERE is a fiddle

Please note that CSS from the fiddle above is just for testing. You should take into consideration left side of the screen ( html & js )

$(function(){

  var $readMore= $('.read-more');
  var $eUser=$('.eUser');

  $readMore.click(function(){
    $('html, body').animate({
        scrollTop: $eUser.offset().top
    }, 800);
  })

})

Btw, why don't you use buttons instead of divs for such kind of actions ? ( new user and so on )

Answer 2

Use animate() function and scrollTop to smoothly scroll to some element.

$(document).on('click', '.read-more.hvr-pulse', function(){
  $('html,body').animate({
        scrollTop: $('.eUser').offset().top
  },'slow');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Main animated fadeIn">
    <!--To make the Site Unique, I have included Several Trailers for the Main Landing Page !-->
    <video autoplay loop poster="polina.jpg" id="bgvid">
        <source src="img/indexMV.webm" type="video/webm">
        <source src="img/indexMV.webm" type="video/mp4">
    </video>
</div>
<!--For Style Purposes, I have wrapped the Login and Register Section of the site in a Container !-->
<div class="eUser">
    <div class="container">
        <div class="login animated bounceInDown" >
            <form class="form-3" action="logreg.php" method="post" accept-charset="utf-8">
                <label>Username: </label><input type="text" name="username" value="" placeholder="Username">
                <br />
                <label>Password: </label><input type="password" name="password" value="" placeholder="Password">
                <br />
                <input class="Login hvr-pulse" type="submit" name="login" value="Login">
                <input class="Register hvr-pulse" type="submit" name="register" value="Register">
            </form>
        </div>
    </div>
</div>
<!-- The code below is The Text for the Landing Page -->
<section class="start-page parallax-background" id="home">
    <div class="content">
    <div class="text">
    <h1>Welcome to our User Login Page. Please Select Your User Type</h1>
    <hr/>
    <div class="read-more hvr-pulse">New User</div>
    <div class="eUser hvr-pulse">Existing User</div>
    <div class="Admin hvr-pulse">Admin</div>
</section>