0

表示可能領域全体の200％の高さのページがあります。つまり、約2ページが重なり合っています。残りの半分のページを表示するには、一番下までスクロールする必要があります。<body>完全なものを、それぞれ高さが100％の2つのdivに分割しました。

div1で、このようなリンクをdiv2に与えました。これは、次のように機能します。

<div id="div1" class="mystyle1">
<a href="#div2">Click Me To Go To DIV2</div>


<div id="div2" class="mystyle2">
<a href="#div1">Click Me To Go To DIV1</div>

これは機能しますが、瞬時にスクロールします。ユーザーが遷移を確認できるように、スムーズにする必要があります。また、CSSでこれを設定してみました。

-webkit-transistion: all 1s ease-in-out;

運が悪い！

4

2 に答える 2

0

これは、Jqueryを使用して簡単に実現できます。トップへのアニメーションスクロールやIDへのアニメーションスクロールなどのグーグルキーワードはあなたにアイデアを与えるでしょう。

簡単なフィドルを行う、おそらくこれはあなたがしたいことです：http: //jsfiddle.net/g5D33/

-

ちなみに、コードにいくつかの小さなタイプミスがあります。たとえば<a>、終了タグでタグが欠落している、sでつづられたトランジションなどです。;）

于 2013-01-11T05:52:32.913 に答える
0

そのために私はいつも小さなJQuery関数を使用します

$('a[href^="#"]').click( function(){
        var scroll_el = $(this).attr('href');
        if ($(scroll_el).length != 0) { 
                    $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 700); 
        }
        return false;
});

JSFIDDLE

水平方向にスクロールする場合：

$('a[href^="#"]').click( function(){
            var scroll_el = $(this).attr('href');
            if ($(scroll_el).length != 0) { 
                        $('html, body').animate({ scrollLeft: $(scroll_el).offset().left }, 700); 
            }
            return false;
    });

JSFIDDLE

于 2015-08-04T12:10:47.050 に答える