使用.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

的問題是，你有讓頁面的主體動畫，而不是div，如jsFiddle所示。

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

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

編輯：改進代碼的可讀性