jquery - HTML Div 滚动到另一个 Div

Question

我有 1 个 Div，“read-more hvr-pulse”，我希望当用户单击该 DIV 时发生一个事件。我希望它滚动到另一个 Div，这是页面下方的登录表单。

我尝试了一个围绕 DIV 的样式，但这导致了样式方面的几个问题，最终它没有工作。我对 JS 相当陌生，所以简单性会令人惊奇。

保存登录名的 DIV 称为“eUser”

基本上我只是希望 DIV“read-more hvr-pulse”顺利滚动到“eUser”。任何帮助将不胜感激。

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

使用animate()函数和 scrollTop 平滑滚动到某个元素。

$(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>