HTML Div Прокрутить к другому Div

Question

У меня есть 1 Div, «read more hvr-pulse», и я хочу, чтобы событие произошло, когда пользователь щелкает этот DIV. Я хочу, чтобы он переместился в другое Div, которое является формой входа в систему на странице.

Я попытался окружить DIV. Но это вызвало несколько проблем с дизайном, и в конце концов это не сработало. Я новичок в JS, поэтому простота была бы потрясающей.

DIV, который содержит имя пользователя, называется, «EUSER»

В основном я просто хочу ДИВ «чтения больше HVR-импульс» для перехода к «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>

Answer 2

Вы можете использовать функцию .animate JQuery

HERE является скрипкой

Обратите внимание, что выше CSS от скрипки только для тестирования. Вы должны принять во внимание левой стороны экрана (HTML & JS)

$(function(){ 

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

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

}) 

Btw, почему бы вам не использовать buttons вместо divs для такого рода действий? (новый пользователь и т. д.)