jQuery scroll div with scrollTop

0 votes
asked Dec 7, 2009 by papermate

I'm trying to scroll a div up or down when hovering over the respective arrows. I also want to be able to jump down the div when the buttons are clicked (think clicking the windows scroll arrows rather than dragging the scroll bar).

The scrolling works but the jumping doesn't. scrollTop() keeps retuning 0.

Here's the code:

function startScrollContent()
{
   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>');

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

      $('.content span.arrow').click(function()
      {
         $('.content .padding').stop();
         direction = ($(this).hasClass('up')) ? '-' : '+';

         alert($('.content .padding').scrollTop());
         //$('.content .padding').scrollTop($('.content .padding').scrollTop + direction + 100);
      });
   }

   return;
}

How can I get the jump part working?

2 Answers

0 votes
answered Dec 7, 2009 by robert-massaioli

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

0 votes
answered Dec 7, 2009 by simondever

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"></script>
<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>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...