アニメーションフェードは、トップに戻るボタンを固定

Question

私は、ユーザーがクリックすると、ページをウェブサイトの次のセクションに移動するダウンリンクを持っています。ユーザーがスクロールを開始するときに、どのように私はこれをバックボタンにフェードインすることができます。これを定位置に固定する方法もありますか？これを推測することはJqueryによって行われますが、それほど確かではありません。

<div class="down-link"><a href="#about" id="w-downlink"><i class="ss-navigatedown"></i></a></div> 


.down-link { 
    width:100%; 
    height:50px;  
} 

#w-downlink i { 
    line-height: 42px; 
    font-size: 24px; 
    color: #fff; 
    display: block; 
    width: 24px; 
    margin: 0 auto; 
    margin-top:10px; 
} 

#w-downlink { 
    height: 60px; 
    width: 60px; 
    background-color: #191919; 
    background-color: rgba(20, 20, 20, 0.4); 
    position:absolute; 
    bottom:0; 
    margin-bottom:30px; 
    right:0; 
    margin-right:20px; 
    cursor: pointer; 
    -webkit-transform: translate3d(0, 0, 0); 
    opacity: 1; 
} 

.w-downlink:hover { 
    height: 60px; 
    width: 60px; 
    background-color: #191919; 
    background-color: rgba(20, 20, 20, 0.4); 
    position:absolute; 
    bottom:0; 
    margin-bottom:30px; 
    right:0; 
    margin-right:20px; 
    cursor: pointer; 
    -webkit-transform: translate3d(0, 0, 0); 
    opacity: 0.5; 
} 

Answer 1

これは、あなたが望むほとんどのものを達成するはずです。 jQueryは必要ありません。

ページ上部に固定されたボタンがあり、スクロールを開始するとそのボタンが変わります。これは単にCSSですposition: fixed;

JSは、windowオブジェクトのスクロールイベントをリッスンします。

ユーザーがif(){}ステートメントを追加して垂直スクロールを確認してページをスクロールした後でも、それを元に戻すように編集しました。

ここでやったように文字列を内側のHTMLにダンプするのではなく、別の要素をdivにダンプすることができます。

エレメントをフェードさせる場合は、CSSトランジションを調べてください。

スクロールイベントが開始されたときにそのクラスを変更することも、javascriptですべてを行うこともできます。

onscroll event documentation

css3 Transitions

var downLink = document.getElementById('down-link'); 
 
window.addEventListener("scroll", function(){//Provide a window listener 
 
    if(window.scrollY){ 
 
    downLink.innerHTML = "Back to Top"; 
 
    }else{ 
 
    downLink.innerHTML = "Down Link"; 
 
    } 
 
    
 
});

#down-link { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    border: 2px solid black /*Just to show the element bounds*/ 
 
    
 
    } 
 

 
#userScrollElement { 
 
    max-height: 500px; 
 
    height: 800px; 
 
    overflow: auto; 
 
}

<div id="userScrollElement"> 
 
    <div id="down-link">Down Link 
 
    </div> 
 
</div>

：ここ

はW3Cから助けるかもしれないいくつかのリソースです