CODEWITHSUNDEEP
jqueryscroll
Farkhonde
Farkhonde

Reputation: 45

How to increase scroll top with jquery?

I'm trying to increase scroll top after each click and wrote this for it but it works just first time. In each call value of x is 30, how can I solve it?

I try it on w3schools website and it works there

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
 $(function () {
        $("#btncl").click(function (e) {
             var x = $("div").scrollTop() + 30;
            $("div").scrollTop(x);

        });
    });
</script>

<body>
<form id="form1" runat="server">
<div style="border: 1px solid black; height: 150px; overflow: auto">
    <ul>
        <li>
            <img width="80px" style="margin-bottom: 5px;" height="70px" alt="" class="img_gallery"
                src="Images_slider/1.jpg" />
        </li>
        <li>
            <img width="80px" style="margin-bottom: 5px;" height="70px" alt="" class="img_gallery"
                src="Images_slider/2.jpg" />
        </li>

    </ul>
</div>
<br>
    <input type="button" value="Return the vertical position of the scrollbar" id="btncl">

</form>

Upvotes: 1

Views: 2789

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388326

Try something like

$(function () {
    var x = $("div").scrollTop();
    $("#btncl").click(function (e) {
        x += 30;
        $("div").scrollTop(x);
    });
});

or

$(function () {
    var incr = 0;
    $("#btncl").click(function (e) {
        incr += 30;
        var x = $("div").scrollTop() + incr;
        $("div").scrollTop(x);
    });
});

Upvotes: 1

WhyMe
WhyMe

Reputation: 535

seems to work for me, see the following jsFiddle.

Html

<div id='abcd' style="border: 1px solid black; height: 150px; overflow: auto">
    <ul>
        <li>
            <img width="80px" style="margin-bottom: 5px;" height="70px" alt="" class="img_gallery"
                src="Images_slider/1.jpg" />
        </li>
        <li>
            <img width="80px" style="margin-bottom: 5px;" height="70px" alt="" class="img_gallery"
                src="Images_slider/2.jpg" />
        </li>

    </ul>
</div>
<br>
    <input type="button" value="Return the vertical position of the scrollbar" id="btncl" />

Javascript

document.body.onclick=function(e){console.log('ok');$('#abcd').scrollTop($('#abcd').scrollTop() +30);}

Upvotes: 0

eric_zyh
eric_zyh

Reputation: 176

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

or? 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

Upvotes: 1

Related Questions