JQuery scrollTo next/prev div

Question

Any ideas why this code (which uses the scrollTo plugin) only works with jquery-1.4.2.min.js and how can I change it so that it works with the latest version of JQuery?

http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery

Thanks :)

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

function scroll(direction) {

    var scroll, i,
            positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

    collection.each(function() {
        positions.push(parseInt($(this).offset()['top'],10));
    });

    for(i = 0; i < positions.length; i++) {
        if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
        if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
    }

    if (scroll) {
        $.scrollTo(scroll, {
            duration: 750       
        });
    }

    return false;
}

$("#next,#prev").click(function() {        
    return scroll($(this).attr('id'));        
});

$(".scrolltoanchor").click(function() {
    $.scrollTo($($(this).attr("href")), {
        duration: 750
    });
    return false;
});

});
</script>

EDIT:

Just wanted to make my intent slightly clearer after feedback..

I want to use the latest version of JQuery 1.8.3, not 1.4.2. But when I use 1.8.3 the scrollTo #next or #prev with class="post" on click doesn't appear to work. When I use 1.4.2 it does. I would be open to suggestions for completely new code however I must have tried at least 20 today and none have worked. At least this works... With an old version of JQuery... Which isn't compatible with my newer plugins :( I'm a real novice.

Basically, when the user clicks the arrows in the header here: http://thomasgrist.tumblr.com/ they should scroll up and down through the Tumblr .post 's

Answer 1

$('#container').animate({
     scrollTop: <value>
}, 500);

You don't actually need that plugin. You can scroll to an offset with the above snippet.

EDIT:

Let's suppose you have a menu with the following markup:

<ul class="menu">
    <li><a href="#" data-for="section_2">Section 2</a></li>
    <li><a href="#" data-for="section_3">Section 3</a></li>
    <li class="last"><a href="#" data-for="section_4">Section 4</a></li>
</ul>

...then the Javascript code will look something like this:

$('.menu li a').click(function() {
    $('#container').animate({
        scrollTop: $('.' + $(this).data('for')).position().top + $('#container').scrollTop()
    }, 500);
    return false;
});

If you're actually scrolling the body then the $('#container') becomes $('html, body') . It's both html and body for IE compatibility.

I didn't use the html and body elements because on iOS 5 there were some issues with that. So a workaround for the issue looks like this:

<body>
  <div id="container">
    rest of the page comes here
  </div>
</body>

and the CSS code for this:

#container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

So in your case I assume you have some markup like this:

<div id="container">
   <div class="post active"></div>
   <div class="post"></div>
   <div class="post"></div>
   <a id="next" href="#">Next</a>
</div>

and some JS to it:

$('#next').click(function() {
    $('#container').animate({
        scrollTop: $('.post.active').next().position().top + $('#container').scrollTop()
    }, 500);
    $('.post.active').removeClass('active').next().addClass('active');
    return false;
});

Of course you also need a scroll event listener on the window to check which post is in the viewport so you can add the 'active' class to it.

JQuery scrollTo next/prev div

Question

1 answers

solution1
1 2013-01-06 22:21:05

JQuery scrollTo next/prev div

Question

1 answers

solution1 1 2013-01-06 22:21:05

solution1
1 2013-01-06 22:21:05