1

このアンカー トランジションが機能しません。どう思うか教えてください。

ここにCSSがあります

a.transition {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

そして、ここにHTMLがあります

<h1 id="intro">Let's Build Something... </h1>
<h1 id="intro2"><a class="transition" href="#create">Together</a>.</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p><a name="create" class="transition">My name is Geoff Phillips, and I'm an innovator. What can I create for you?<a/></p>
4

2 に答える 2

8

CSSだけでは無理だと思います。jQueryでそれを実現する関数は次のとおりです。

$('a[href^=#]').on("click",function(e){
    var t= $(this.hash);
    var t=t.length&&t||$('[name='+this.hash.slice(1)+']');
    if(t.length){
        var tOffset=t.offset().top;
        $('html,body').animate({scrollTop:tOffset-20},'slow');
        e.preventDefault();
    }
});​

これは、どの<a href="#any-id-or-name">アンカーでも機能します。 デモ。

スクロールを速くしたり遅くしたりするには、またはミリ秒単位の任意の数値に変更'slow'します。'fast'

于 2012-09-28T16:20:54.137 に答える
0

scrollIntoView JavaScript メソッドを使用して、ページの任意の要素にスクロールできます。どの要素でも使用できます。 document.getElementById("yourElement").scrollIntoView();までスクロールしyourElementます。Firefox では、メソッドのパラメーターとして追加することで、スムーズにスクロールすることもできます{behavior:'smooth'}。残念ながら、これはクロスブラウザではありません。

クロスブラウザの VanillaJS ライブラリが必要な場合は、Smooth-scrollをお勧めします

于 2016-01-19T10:45:41.163 に答える