CODEWITHSUNDEEP
jquery
Peter John
Peter John

Reputation: 1

How to add easing on ScrollTO

How to add easing on ScrollTo. I want to use this effect but with easing. Please check demo here. http://www.webdesignerwall.com/demo/scrollto-demo/

$(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>

Upvotes: 0

Views: 2674

Answers (2)

Miguel
Miguel

Reputation: 168

You can animate the scrollTop and scrollHeight properties of a DOM element:

$("#element").animate({"scrollTop": "500px"}, "fast");
$("#element").animate({"scrollLeft": "500px"}, "fast");

Upvotes: 0

icktoofay
icktoofay

Reputation: 128991

Add the easing property in the options:

$.scrollTo(element, {
    duration: 200,
    easing: 'swing'
});

Upvotes: 1

Related Questions