Question

I want to scroll a news article list up and down depending on which buttons is clicked

I wanted to adapt this way of animating if possible:

function smoothAdd(id, text)
{
    var el = $('#scroller' + id);

    var h = el.height();

    el.css({
        height:   h,
        overflow: 'hidden'
    });

    var ulPaddingTop = parseInt(el.css('padding-top'));
    var ulPaddingBottom = parseInt(el.css('padding-bottom'));

    el.prepend('<li>' + text + '</li>');

    var first = $('li:first', el);
    var last  = $('li:last',  el);

    var foh = first.outerHeight();

    var heightDiff = foh - last.outerHeight();

    var oldMarginTop = first.css('margin-top');

    first.css({
        marginTop: 0 - foh,
        position:  'relative',
        top:       0 - ulPaddingTop
    });

    last.css('position', 'relative');

    el.animate({ height: h + heightDiff }, 1500)

    first.animate({ top: 0 }, 250, function() {
        first.animate({ marginTop: oldMarginTop }, 1000, function() {
            last.animate({ top: ulPaddingBottom }, 250, function() {
                last.remove();

                el.css({
                    height:   'auto',
                    overflow: 'visible'
                });
            });
        });
    });
}

  $('.scrollUp').click(function() {
      smoothAdd('scrollUp', 'A new item');
  });

Example here: http://www.fiveminuteargument.com/blog/scrolling-list

My HTML looks like this:

  <ul id="scroller">
      <li class="current"><span>/</span><a href="#article1">News Article Title</a></li>
      <li><span>/</span><a href="#article2">News Article Title 2</a></li>
      <li><span>/</span><a href="#article3">News Article Title 3</a></li>
  </ul>
  <div class="btnWrap"><p><a href="#arrow" class="scrollUp">Scroll Up</a>
  <a href="#arrow" class="scrollDown">Scroll Up</a></p></div>

Can anyone point me in the right direction?

Basically maintain the animation style but keep it as a defined UL as per a normal carousel.

Answer 1

Here : http://jsfiddle.net/sDedY/13/

I’ve written form scratch. as you notice I’ve added css directly in a css file, it’s better than adding css via jquery, especially for future mainenance/ decorateion etc.., but I havent spent much time for different caluclations. This is a blueprint I guess, you can modify and make it much better, like make top and bottom combined to make the function small or things like that, i jsut dont have time anymore … so again : redo the calculations based on css yourself and modify it !

EDIT : regarding variable height, you need to keep in mind that I haven’t finalised the whole function. next step in coding this function would be auto-calculation of margin-top and top rather than manually entering them, which is pretty easy. all that’s needed is to pass a variable to get the position and dimensions of li elements and then pass them to our code.