ansaurus

Question

Answer 1

A:

I blogged about scrollIntoView() which you might find helpful to do exactly this type of jumping.

Robert Massaioli 2009-12-07 03:21:10

That would require me placing a new element every X pixels in the DIV so I can jump to it. Not as clean as I was hoping this to be...

papermate 2009-12-07 03:25:30

Answer 2

A:

Without any arguements the scrollTop function returns the offset value. Use element.scrollTop(0) to scroll to the top. Here is a test that I ran which worked ok in FF and IE8 (but that doesn't mean it will work in IE6). I also changed some parts of your code because for some reason you had the hover and click events being bound to arrows that you wanted to find under the content tag (which isn't where you appended them to), you put them under the tag with the haccordion-opened class. Additionally the HTML you supplied used the haccordion class and not the haccordion-opened class as in your javascript. I changed the HTML to suit.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function()
    {
        if ($('.haccordion-opened').prev('.header').find('div').attr('title') != 'dontscroll' && $('.haccordion-opened span.arrow').length == 0)
        {
            $('.haccordion-opened').append('<span class="arrow down" style="position: absolute; bottom: 5px; left: 260px; font-size: 9pt;">&#9660;</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">&#9650;</span>');

            $('.haccordion-opened span.arrow').hover(function()
            {
                direction = ($(this).hasClass('up')) ? '-=' : '+=';
                $('.content .padding').animate({scrollTop: direction + $('.content .padding').css('height')}, 5000);
            }, function()
            {
                $('.content .padding').stop();
            });

            $('.haccordion-opened span.arrow').click(function()
            {
                $('.content .padding').stop();
                direction = ($(this).hasClass('up')) ? '-=' : '+=';
                $('.content .padding').animate({scrollTop: direction + 100}, 0);
            });
        }
    });
</script>
</head>
<body>
    <div class="haccordion-opened">
        <div class="header">
            <div title="blah"></div>
        </div>
        <div class="content">
            <div class="padding" style="height: 400px; overflow: hidden">
                <h4>Blah...</h4>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
            </div>
        </div>
    </div>
</body>
</html>

Ambrosia 2009-12-07 03:40:28

That's what I'm trying to do. Find where the div is currently scrolled to (from the hover'd scroll functionality) - Which is, lets say, half way down the div. Then I want to increment that scoll by ~100 pixels. So the div will now be at half way + 100 pixels. Then the more you click, the further it jumps the div's scroll down. scrollTop(), however, keeps retuning the offset as 0. No matter how far down I scroll it.

papermate 2009-12-07 03:42:25

Can you paste some abridged HTML so I can play and test?

Ambrosia 2009-12-07 03:44:42

http://slexy.org/view/s200KYx3jy <-- There you go.

papermate 2009-12-07 03:48:04

What are you testing this in... because I am just reading up something about IE6 not handling multiple class elements well with jQuery.

Ambrosia 2009-12-08 00:33:56

Oh yeah and I changed the startScrollContent() name to just be under the document ready function, for my testing purposes.

Ambrosia 2009-12-08 01:09:38

ansaurus

tags:

views:

answers:

jQuery scroll div with scrollTop

related questions