2012-02-29 16 views
0

如何在ScrollTo上添加緩動。我想用這個效果,但用緩和。請在這裏查看演示。 http://www.webdesignerwall.com/demo/scrollto-demo/如何在ScrollTO上添加緩動

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

回答

1

添加easing屬性的選項:

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

當我將它甚至沒有動畫此代碼頁。我對Jquery不熟悉我不知道我在做什麼錯。 – 2012-02-29 11:56:07

+0

我將此代碼替換爲您的代碼,但它停止工作。 $ .scrollTo(scroll,{ duration:750 }); – 2012-02-29 12:25:41

+0

@Peter:檢查錯誤控制檯以查看是否有任何錯誤。 – icktoofay 2012-03-01 01:33:57

0

您可以動畫DOM元素的scrollTop的和scrollHeight屬性屬性:

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

沒有得到你我應該在哪裏添加此代碼在頁面上? – 2012-02-29 12:27:20