ScrollTo() in jquery

Question

I have a code in which when a button is clicked the corresponding div is scrolling up along with the button. I want a code in which when a button is clicked the button must be in its respective position ie, the buttons must be fixed, but the corresponding div must scroll up. The same should be applied to all the buttons and their respective divs Here is my code in which I used 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>

When I executed the above code the output1,2,3 are scrolling up but along with example1,2,3. I want a code in which the buttons must be fixed but the divs must move to the position below the buttons div

Answer 1

Make position:fixed for submit-buttons class.

add css and make changes according to your need.

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

I hope it helps you. http://jsfiddle.net/56P4T/

EDIT:

You can use this script(Ref: ek_'s answer).I hope it helps you.

$(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);
    });
});

Answer 2

Sumit Raghav gave you the right answer about fixed-positioning your buttons. If you want your outputs to move just below the .submit-buttons div (in fact, it is your entire body which is moving) you may consider animating the scrollTop property, which is, I guess, what your scrollTo plug-in is doing:

$("#example1").click(function() {        
    // your get the position of #output1 with respect to the top of the document
    // and you remove the height of the .submit-buttons div to scroll just below
    var val = $("#output1").offset().top - $(".submit-buttons").height();

    // animate the scrollTop property
    $("html, body").animate({scrollTop: val}, 800);
});