web-dev-qa-db-ja.com

jQueryアニメーションスクロール

エフェクトを呼び出す方法がわかりませんが、このWebサイトと同じエフェクトを実行するのに役立つライブラリを誰かに教えてもらえますか？

http://www.makr.com

基本的に、マウスクリックでページの上部に行を移動します。コードスニペット（できればjQuery）は、そのような特殊なエフェクトライブラリがない場合に役立ちます。

別のトピックを開始する必要があるかどうかはわかりませんが、小さなjQueryスニペットを使用してMakr UIの効果全体を達成するために誰でも私を助けることができますか？

jqueryuser-interfacescrolleffects
67
Marvzz

JQueryを使用して、ページのスクロールトップをアニメーション化できます。

$('html, body').animate({
    scrollTop: $(".middle").offset().top
 }, 2000);

このサイトを参照してください： http://papermashup.com/jquery-page-scrolling/

203
Mathieu

私が開発したシンプルなjqueryプラグイン（ AnimateScroll ）を試すこともできます。

5
Ram Patra

私はただ使用します：

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);
1
Ngô Đức Tuấn
var page_url = windws.location.href;
var page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
} else if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
}

}）;

1
Ragnarök

これにはjqueryプラグインがあります。ドキュメントを特定の要素までスクロールし、ビューポートの中央に完全に収まるようにします。また、アニメーションのイージングもサポートしているため、スクロール効果が非常に滑らかに見えます。 AnimatedScroll.js をご覧ください。

0
Eugene Tiurin