javascript - jquery 中的 ScrollTo()

Question

我有一个代码，当单击一个按钮时，相应的 div 会随着该按钮向上滚动。我想要一个代码，其中单击按钮时按钮必须位于其各自的位置，即按钮必须固定，但相应的 div 必须向上滚动。同样应该应用于所有按钮及其各自的 div 这是我使用 scrollTo()

的代码

    <div class="submit-buttons">
        <input  id="example1" type="submit"  name="script" value="Sample1"/>
        <input  id="example2" type="submit"  name="script" value="Sample2"/>
        <input  id="example3" type="submit"  name="script" value="Sample3"/>
    </div>

    <div id="output1" style="margin-top:200px">This is output1</div>
    <div id="output2" style="margin-top:600px">This is output2</div>
    <div id="output3" style="margin-top:800px">This is output3</div>

    <script>
        $("#example1").click(function() {
            $.scrollTo( '#output1', 800);
        });
        $("#example2").click(function() {
            $.scrollTo( '#output2', 800);
        });
        $("#example3").click(function() {
            $.scrollTo( '#output3', 800);
        });
    </script>

当我执行上面的代码时，输​​出 1、2、3 向上滚动，但与示例 1、2、3 一起滚动。我想要一个代码，其中按钮必须固定，但 div 必须移动到按钮 div 下方的位置

Answer 1

为 submit-buttons 类制作 position:fixed。

添加CSS并根据您的需要进行更改。

.submit-buttons{
 position:fixed;   
 top:10px;
 width:100%;
}

希望对你有帮助。 http://jsfiddle.net/56P4T/

编辑:

您可以使用此脚本(引用:ek_ 的回答)。希望对您有所帮助。

$(document).ready(function (){

    $("#example1").click(function() {
        var val = $("#output1").offset().top - ($(".submit-buttons").height()+10);
    $("html, body").animate({scrollTop: val}, 800);
    });
    $("#example2").click(function() {
        var val = $("#output2").offset().top - ($(".submit-buttons").height()+10);
       $("html, body").animate({scrollTop: val}, 800);
    });
    $("#example3").click(function() {
        var val = $("#output3").offset().top - ($(".submit-buttons").height()+10);
       $("html, body").animate({scrollTop: val}, 800);
    });
});