.animate（）を使用してdivにジャンプ

Question

divをキー入力時に別のdivにジャンプさせようとしています。私はトリックを行うだろうscrollTopスプライトをアニメーション使用していることを読んで、それは

$("#search").keypress(function(event) { 
     if (event.which == 13) { 
     $("#search").animate({ 
      scrollTop: $("#results").offset().top}, "fast"); 
      var keyword = $("#search").val(); 
      $("#results").html(makeRequest); 
      $("#search").val(''); 
     } 
     } 
    }); 

https://jsfiddle.net/4ymyLoLL/

Answer 1

$('body,html').animate({ scrollTop: $("#results").offset().top }, 400); 

$(function() { 
 
    $("#search").on('keypress',function(event) { 
 
    if (event.which == 13) { 
 
    $('body,html').animate({ scrollTop: $("#results").offset().top }, 400); 
 
     var keyword = $("#search").val(); 
 
     $("#results").html("test"); 
 
     $("#search").val(''); 
 
    } 
 
    }); 
 
});

body, html { 
 
    margin: 0 auto; 
 
} 
 

 
.container-fluid { 
 
    padding:0px !important; 
 
} 
 

 
.right { 
 
    background-color: #fcfdfe; 
 
    width:100%; 
 
    height:100vh; 
 
} 
 

 
.left { 
 
    background-color: #eef1f9; 
 
    width:100%; 
 
    height:100vh; 
 
} 
 

 

 
#search { 
 
    background-color: #fcfdfe; 
 
    border: none; 
 
    border-radius: 100px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: 0; 
 
    padding:10px; 
 
    width:350px; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -25%); 
 
    display:inline-block; 
 
} 
 

 
#search:focus { 
 
    outline: none; 
 
} 
 

 
#results { 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="wrapper"> 
 
    <div class="container-fluid"> 
 
     <div class="left"> 
 
     <input type="search" id="search" placeholder="Enter a keyword" class="keyword" /> 
 
     </div> 
 
     <div class="right"> 
 
     <div id="results"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 2

問題を動作していないようですあなたが持っているということですjsFiddleに表示されているように、divの部分ではなくページの本文をアニメートします。

https://jsfiddle.net/4ymyLoLL/1/

$('html, body').animate({ 
    scrollTop: $("#results").offset().top 
}, "fast"); 

EDIT：jsfiddleは、基準が欠落している改良型コードの読みやす