javascript - Javascript または jQuery の要素へのスライド

Question

ユーザーが「Contact Me」ボタンをクリックすると、画面を #contact 要素にスライドさせたいのですが、その方法がわかりません。さまざまなコード スニペットを試し、ニーズに合わせて調整しようとしましたが、何も機能していないようです。

サイトはこちらです。http://dombracher.com/

すばやくスナップするのではなく、画面を上記の div にスライドさせたいだけです。

前もって感謝します。

Answer 1

ウィンドウのスクロールを自分でアニメーション化できます

$(".menu2").click(function(){
    $(document.body).animate({
        "scrollTop": $("#contact").offset().top
    }, 2000, "swing"); // animation time and easing
    return false; // preventing default jump
});

フィドル: http://jsfiddle.net/M8JE2/

または、 http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.htmlのような jquery プラグインを使用して、すべてのローカル リンクをアニメーションで動作させます。

Answer 2

$(document).ready(function() {
  $("a[href^='#']").anchorAnimate()
});

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")

            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

Answer 3

お問い合わせフォームがあるので、ページの一番下までスクロールします。

jQuery(function () {
    jQuery('#nav1 li.menu2').click(function (e) {
        jQuery("html, body").stop().animate({
            scrollTop: jQuery(document).height()
        }, 1000);
        e.preventDefault();
        return false;
    });
});