Taobaoのホームページの上部ボタンは次のとおりです。ボタンが一定の距離に置かれたときにボタンが表示されます。ボタンをゆっくりとクリックして上部に戻します
まず、このような効果を達成するためにどのイベントを追加する必要があるかを分析しましょう。マウスをボタンの内外に移動すると、ボタンのパフォーマンスが変更されるため、マウスオーバーとマウスアウトイベントをボタンに追加する必要があります。 Scrollbarの変更を聞くには、ウィンドウに巻物イベントを追加し、ボタンをクリックして上部に戻り、ボタンにクリックイベントを追加する必要があります。イベントハンドラーを3つの関数にカプセル化し、移動、gotopに移動します。
これがHTML/CSSコードです
コードコピーは次のとおりです。
<div>
<div> head </div>
<div>メインコンテンツ、高さは2000px </div>です
<divbtn ">トップに戻る</div>
</div>
コードコピーは次のとおりです。
.container {width：980px;
.content {height：2000px;
#btn {
位置：修正;
下：50px;
右：0;
幅：54px;
高さ：55px;
背景：url（icons.png）No -Repeat 0 -110px} //背景画像を自由に見つけることができます
フォントサイズ：12px;
ラインハイト：55px;
テキストアライグ：センター;
テキストインデント：-9999EM;
カーソル：ポインター;
表示：なし;
以下は完全なJSコードです
コードコピーは次のとおりです。
window.addeventlistener（ "load"、function（）{
var btn = document.getElementById（ "btn"）;
btn.addeventlistener（ "mouseover"、movin、false）;
btn.addeventlistener（ "mouseout"、moveout、false）;
関数movein（）{
btn.style.color = "#ffffff";
btn.style.textindent = "0em";
btn.style.backgroundimage = "none";
btn.style.backgroundcolor = "＃ff4401";
}
関数ムーブアウト（）{
btn.style.textindent = "-9999em";
btn.style.backgroundimage = "url（icons.png）";
}
関数gotop（acceleration、time）{//パラメーターを変更して速度を調整して上部に戻る
加速=加速||。
時間=時間||。
var速度= 1 +加速;
function getScrolltop（）{//スクロールバーの垂直距離を取得します
document.documentlement.scrolltop ||を返します。
}
function setscrolltop（value）{//スクロールバーの垂直距離を設定します。
document.documentlement.scrolltop = value;
document.body.scrolltop = value;
}
window.onscroll = function（）{
var scrolltop = getScrolltop（）;
if（scrolltop> 100）{//窓の上部からの距離を決定するとき、それは100pxです
btn.style.display = "block";
} それ以外 {
btn.style.display = "none";
}
};
btn.onclick = function（）{
var timer = setInterval（function（）{
setscrolltop（math.floor（getscrolltop（） /speed））;
if（getscrolltop（）== 0）
ClearInterval（タイマー）;
}、 時間）;
};
}
gotop（0.2、8）;
}、 間違い）;
もちろん、他の実装方法があり、以下は他の方法の重要なコードです
コードコピーは次のとおりです。
btn.onclick = function（）{
ClearInterval（タイマー）;
var timer = setInterval（function（）{
var = scrolltop; //スクロールバーの垂直距離
speed =（0 -now） / 10;
speed = math.floor（speed）;
if（now == 0）;
ClearInterval（タイマー）;
document.documentelement.scrolltop = now + speed;
document.body.scrolltop = now + speed;
}、15）;
}
ここのコードは、主にインターネット上の他のリソースを指し、あなた自身の理解を少し追加します。もちろん、JavaScriptが最も早い時期にサポートするwindow.scrollto（）など、他の実装方法があります。 JQで実装すると、コードボリュームは非常に小さくなります
個人的には、データ型、閉鎖、継承、範囲、DOM、CSS、イベント処理、AJAXなどを把握したり、習熟後に他のフレームワークを学ぶなど、最初にネイティブJavaScriptを学ぶ方がはるかに簡単だと思います。