jQuery-滾動到數據ID

Question

我有一個div，其數據參數為“ go”，其中包含位於頁面下方的div的ID。 例如：

<div data-go="help" data-info="">text</div>

目前，我可以使用以下代碼跳轉到div：

$("#icons > div").click(
    function() {
        input = $(this).data("go");
        window.location.hash = input;
    }
);

但是，我想要一個平滑的過渡（滾動）。
我已經嘗試過調整各種stackoverflow解決方案-但到目前為止還沒有運氣。

Answer 1

看到這個 JSFiddle：

的JavaScript

$("#icons > div").click(
    function() {
        var id = $(this).data("go");
        $(document.body).animate({scrollTop: $("#" + id).offset().top, duration: 400});
    }
);

的HTML

<div id="icons">
    <div data-go="help" data-info="">text</div>
</div>

<div id="help">
    <h1>
        Help section
    </h1>
</div>

Answer 2

獲取目標元素的頂部偏移位置值，然后使用jQuery的animate函數為body的scrollTop屬性設置動畫：

var input = $(this).data("go");
jQuery(document.body).animate({
   scrollTop:jQuery("#"+input).offset().top+"px"
});

演示版

 $("#text").click(function() { var input = $(this).data("go"); var top = jQuery("#"+input).offset().top; jQuery(document.body).animate({ scrollTop:top+"px" },1000); }); 

 #spacer { height:1500px; } #help { height:250px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="text" data-go="help" data-info="">text</div> <div id="spacer"></div> <div id="help">Help</div>