JQuery scroll event not working

Question

I have been trying to make jquery scroll text in a textbox using a button click but it does not work in IE, Chrome, or Firefox.

I would like my textbox manually to scroll down on click of the button.

<!DOCTYPE html>
<html>
<head>
    <script src="http://localhost:62240/Scripts/jquery-2.1.1.js"></script>
    <script>
        x = 0;
        $(document).ready(function () {
            $("div").scroll(function () {
                $("span").text(x += 1);
            });
            $("button").click(function () {
                $("div").scroll();
            });
        });
    </script>
</head>
<body>

    <p>Try the scrollbar in the div</p>
    <div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">
        In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
        <br><br>
        'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
    </div>
    <p>Scrolled <span>0</span> times.</p>
    <button>Trigger scroll event for the window</button>

</body>
</html>

Demo

I think you kinda misunderstood the .scroll() functionality: api.jquery.com/scroll — emerson.marini
– emerson.marini, Commented Aug 4, 2014 at 19:54
Are you expecting $("div").scroll() to cause the div contents to move, i.e. scroll? — j08691
– j08691, Commented Aug 4, 2014 at 19:55
I guess you are looking for the scrollTo() function in Jquery — denoise
– denoise, Commented Aug 4, 2014 at 19:56
This is not complete, but maybe it will give you a hint? You need to add logic for scrolling up... jsfiddle.net/joseftw/QzMP9/4 — JOSEFtw
– JOSEFtw, Commented Aug 4, 2014 at 19:59

lpg · Accepted Answer · 2014-08-04 19:56:26Z

2

scroll() is the event fired when div is scrolled. If you want to scroll by clicking on the button, try this instead:

    x = 0;
    $(document).ready(function () {
        $("button").click(function () {
            $('div').animate({ scrollTop: (x+1)*20 }, 200);
            $("span").text(x += 1);
        });
    });

FIDDLE DEMO

answered Aug 4, 2014 at 19:56

lpg

4,9371 gold badge18 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicolas Over a year ago

On the first button click it doesn't scroll.

lpg Over a year ago

Yes, I've just fixed it. As the first click it was scrolling to 0*20, it didn't move...

Jonathan Lerner · Accepted Answer · 2014-08-04 20:03:55Z

0

Your jquery import doesn't work. If you take the exact same code, paste it into a jsfiddle with jquery imported by them, and then click the button, the span counter increments.

answered Aug 4, 2014 at 20:03

Jonathan Lerner

4501 gold badge4 silver badges11 bronze badges

Comments

David Villamizar · Accepted Answer · 2014-08-04 22:01:53Z

This is the code from @lpg fixed to make everything work properly(sorry I write this as an answer, I don't have enough reputation to comment yet):

    x = 0;
    height = 0;
    $(document).ready(function () {
        $("button").click(function () {
            height = $('div').scrollTop();
            $('div').animate({ scrollTop: height+20 }, 200);
        });
        $('div').scroll(function() {
            $("span").text(x += 1);
        });
    });

Here is the JS Fiddle demo fixed.

The jQuery method element.scrollTop(); is used to get the scroll position of a scrollable element, and also to set it when an argument is included. Then $('div').scrollTop(); returns the pixels scrolled inside the div from its top, and $('div').scrollTop(20); will scroll the div 20 pixels from its top.

Collectives™ on Stack Overflow

JQuery scroll event not working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related