ネイティブ JS は、component_javascript スキルのトップへのスムーズな復帰を実装します-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:10:35

オリジナル

2158 人が閲覧しました

「トップに戻る」コンポーネントは、単純な要件を備えた非常に一般的な 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) &#63; '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 アンカータグを使用するのが最も簡単ですしかし、唯一の欠点はスタイルがあまり良くなく、このアンカータグが表示されてしまうことです。

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

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

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

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

トップに戻る

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

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

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

トップに戻る

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&#63;'block':"none"}};BackTop('gotop');

ログイン後にコピー

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

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

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

ログイン後にコピー