タオバオのホームページでボタンをクリックするとゆっくりとトップに戻る効果をネイティブjsで実現

タオバオのホームページの「トップに戻る」ボタンは次のようになります。ボタン上にマウスを置くと、ボタンは一定の距離まで引き下げられるまで表示されず、ボタンの背景が灰色になり、アイコンがテキストに変わります。ボタンをクリックしてゆっくりとトップに戻ります

まず、そのような効果を実現するにはどのようなイベントを追加する必要があるかを分析してみましょう。マウスがボタンの内外に移動すると、ボタンの動作が変化するため、マウスオーバーイベントとマウスアウトイベントをボタンに追加する必要があります。スクロールバーの変更をリッスンするには、ウィンドウにスクロールイベントを追加し、ボタンをクリックして先頭に戻り、ボタンにクリックイベントを追加する必要があります。イベントハンドラーを 3 つの関数 moveIn、moveOut、goTop にカプセル化します。

HTML/CSS コードは次のとおりです

コードをコピーしますコードは次のとおりです。

メインコンテンツ、高さは 2000px

コードをコピーしますコードは次のとおりです:

.container {幅: 980px; マージン: 0 自動; 高さ: 自動; 背景: #aaa;}

.content { 高さ: 1px 青一色; 
#btn { 
位置: 固定; 
下: 50 ピクセル; 
高さ: 55 ピクセル; png ) no-repeat 0 -110px; } //任意の背景画像を見つけることができます 
font-size: 12px; 
text-align: center; text- indent: -9999em; 
cursor: pointer; 
display: none; 

 
以下は完全な js コードです




コードをコピー

コードは次のとおりです:

window.addEventListener("load",function() { var btn = document.getElementById( "btn"); btn.addEventListener("mouseover", moveIn, false); function moveIn(); >btn.style.color = "#ffffff"; // 変更されたインラインスタイルが最も優先されます。

btn.style.backgroundImage = "none"; 🎜> btn.style.backgroundColor = "#FF4401";

} 
function moveOut() { 
btn.style.textIndent = "-9999em"; 
btn.style.backgroundImage = "; (icons .png)"; 
} 

function goTop(acceleration, time) { //パラメータを変更してトップに戻る速度を調整します 
acceleration =加速度 || 0.1; 
time = time | 10; 
varspeed = 1加速度; 
function getScrollTop() { //スクロールバーの垂直距離を取得します
return document.body. scrollTop; 
} 
function setScrollTop(value) { //スクロール バーの垂直距離を設定するための重要な点は、スクロール バーの垂直距離を短い間隔で継続的に変更することです。スクロール効果 
document.body.scrollTop = 値; 
window.onscroll = function() { 
varscrollTop(); 🎜>if (scrollTop > 100) { //スクロールバーがウィンドウ上部からどのくらい離れているかを判断して表示します。ここでは 100px です。 
btn.style.display = "block" 
} else; { 
btn.style.display = "none "; 
} 
}; 
btn.onclick = function () { 
var timer = setInterval(function() { 
setScrollTop) (Math.floor(getScrollTop() /speed)) ; //このコード行が重要です。スクロール バーの垂直距離を取得し、それを速度で割って、スクロール バーまでの垂直距離を設定します。 >if (getScrollTop() == 0) 
clearInterval(timer); 
} 
goTop(0.2, 8); false); 

 
もちろん、他の実装メソッドもあります。他のメソッドのキー コードは以下に示されています。 




 コードをコピー 
 

 コードは次のとおりです。 

 
btn.onclick = function() { 
clearInterval(timer); 
var timer = setInterval(function() { 
var now =scrollTop; //スクロールバーの垂直距離
speed = (now == 0); 🎜>clearInterval(timer); 
document.documentElement.scrollTop = 現在の速度; //

document.body.scrollTop = 現在の速度; 15) ;
}

タオバオのホームページでボタンをクリックするとゆっくりとトップに戻る効果をネイティブjsで実現_javascriptスキル

ここでのコードは主にインターネット上の他のリソースを参照しており、私自身の理解を少し追加しています。もちろん、JavaScript が最初にサポートした window.scrollTo() など、他の実装メソッドもあります。 jQ を使って実装するとコード量が非常に少なくなります。w3cplus を参照してください

個人的には、データ型、クロージャ、継承などを理解するなど、最初にネイティブ JavaScript をよく学習する必要があると思います。、スコープ、DOM、CSS、イベント、処理、Ajax など。他のフレームワークに慣れると、学習がはるかに簡単になります。

タオバオのホームページでボタンをクリックするとゆっくりとトップに戻る効果をネイティブjsで実現_javascriptスキル