Question

我有1个Div，＆＃34;读取更多hvr-pulse＆＃34;我希望当用户点击该DIV时发生一个事件。我希望它滚动到另一个Div，这是一个登录页面。

我尝试了围绕DIV的但是这造成了样式的几个问题，并且在一天结束时它不起作用。我是JS的新手，所以简单性会很棒。

持有登录名的DIV被称为＆＃34; eUser＆＃34;

基本上我只想要DIV＆＃34;读更多hvr-pulse＆＃34;滚动到＆＃34; eUser＆＃34;顺利。任何帮助都将不胜感激。

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>

Answer 2

您可以使用.animate jQuery函数

HERE是一个小提琴

请注意，上述小提琴中的CSS仅用于测试。你应该考虑屏幕的左侧（html＆amp; js）

$(function(){

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

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

})

顺便说一下，为什么不使用buttons代替divs进行此类操作？（新用户等）

HTML Div滚动到另一个Div

2 个答案: