ネイティブ JS は、component_javascript スキルのトップへのスムーズな復帰を実装します

「トップに戻る」コンポーネントは、単純な要件を備えた非常に一般的な Web ページ機能です。ページが一定距離スクロールした後、「トップに戻る」ボタンをクリックすると、スクロール バーを先頭までスクロールできます。ページ。

実装のアイデアも非常に簡単で、document.documentElement.scrollTop または document.body.scrollTop の値を変更するだけです。

この記事は、加速と減速のクールな効果をすべて放棄し、ソフトウェアの本質に戻り、実用性のみを追求し、いわゆるユーザーエクスペリエンスを追求しません。その効果は次のとおりです。 >

アイデアとコードは非常にシンプルなので、実装の詳細を直接投稿します。

var BackTop = function (domE,distance) {
if (!domE) return;
var _onscroll = window.onscroll,
_onclick = domE.onclick;
window.onscroll = throttle(function(){
typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
toggleDomE();
},100);
domE.onclick = function(){
typeof _onclick === 'function' && _onclick.apply(this, arguments);
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
};
function toggleDomE(){
domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
}
function throttle(func, wait) {
var timer = null;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
}
}
}; 

呼び出し方法:

<script>
new BackTop(document.getElementById('backTop'))
</script> 

私がこのブログを書き、このような単純なものを作成した理由は 2 つあります:

1) この間、いくつかの一般的な単純なコンポーネントを手動で作成してきました。これは、この一連のブログをより完全なものにするために、このコンポーネントを追加したものです。

2) 仕事のプロセスにおける私の見解の 1 つを表明したいと思います。ユーザー エクスペリエンスをソフトウェアや製品の装飾に使用しないでください。率直に言って、ユーザー エクスペリエンスは 2 つの言葉に分けることができます。1 つは良い印象、もう 1 つは良い印象です。もう一つは、ただ楽しいだけではなく、どんなに美しいものを作っても、その製品の核となる価値やサービスが十分でなければ、それが最終的な目的ではありません。超無敵ロケットに乗って頂上に戻る機能は無駄になる。フロントエンド開発を行う場合、プロダクト マネージャーがユーザー エクスペリエンス機能についてどの程度言及するかをある程度制御する必要があります。このコンポーネントについては、開発時間が長くなるだけでなく、加速効果や減速効果を行うのは冗長だと思います。しかし同時に、ユーザーの使用時間を遅らせ、テクノロジーをいじるという頑固さによって、あなたの作品がより完璧なものになる可能性があります。

一般的な Web ページのトップに戻るコードをいくつか紹介しましょう

1. HTML アンカー タグを使用するのが最も簡単です しかし、唯一の欠点はスタイルがあまり良くなく、このアンカータグが表示されてしまうことです。

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

aa1edeeb7f58e5dbf7a3582a62112a7d5db79b134e9f6b82c0b36e0489ee08ed

先頭に近い限り、6c04bd5ca3fcae76e30b72ad730ca86d タグの後のどこにでも配置できます。

ページの下部に配置します:

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

3084c989cc3fc7888f5bec97780f1351トップに戻る5db79b134e9f6b82c0b36e0489ee08ed

2. Javascript のスクロール機能を使用して先頭に戻ります スクロール関数は、スクロール バーの位置を制御するために使用されます。非常に単純な実装方法が 2 つあります。

方法 1 (推奨: シンプルで便利):

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

6ef0781b13415735db0500a4e94ca4b1トップに戻る5db79b134e9f6b82c0b36e0489ee08ed

scroll の最初のパラメータは水平位置、2 番目のパラメータは垂直位置です。たとえば、垂直方向に 50 ピクセルの位置に配置したい場合は、scroll(0,50) に変更します。

方法 2 (効果に焦点を当てる: ゆっくりと上向きに):

このメソッドは徐々に先頭に戻るため、コードは次のようになります。

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

これは動的に先頭に戻りますが、先頭に戻ってもコードはまだ実行中なので、それを停止するにはpageScroll関数に文を追加する必要があります。

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

3. Onload とスクロール機能を使用して動的に先頭に戻ります まず、Web ページの body タグの終わりの前に

を追加します。

<divid="gotop">返回顶部</div>

2. 次の JS スクリプト部分を呼び出します:

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

これらは Web ページに配置することも、gotop.js などの js ファイルとして独立して次の形式で保存することもできます:

もちろん、この呼び出しメソッドはファイルパスが JS であることを前提としています。他の場所に配置する場合は、状況に応じて変更してください。

<scriptsrc="/js/gotop.js"type=text/javascript></script>