ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryの一番上までスムーズスクロールするプラグインについて
この記事では主にjqueryベースのスムーズスクロールプラグインを詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。
次の図に示すように、固定ボタンをクリックしてウィンドウの上部までスムーズにスクロールします。この機能はフロントエンド開発で非常に一般的です。
キー コード:
$.fn.scrollTo = function(options) { var defaults = { toT: 0, //滚动目标位置 durTime: 500, //过渡动画时间 delay: 30, //定时器时间 callback: null //回调函数 }; var opts = $.extend(defaults, options), timer = null, _this = this, curTop = _this.scrollTop(), //滚动条当前的位置 subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值 index = 0, dur = Math.round(opts.durTime / opts.delay), smoothScroll = function(t) { index++; var per = Math.round(subTop / dur); if (index >= dur) { _this.scrollTop(t); window.clearInterval(timer); if (opts.callback && typeof opts.callback == 'function') { opts.callback(); } return; } else { _this.scrollTop(curTop + index * per); } }; timer = window.setInterval(function() { smoothScroll(opts.toT); }, opts.delay); return _this; }; //调用 $("body").scrollTo({ toT: 0 });
js はスクロール バーを制御して、先頭にゆっくりスクロールします。 実装 code_javascript スキル
以上がjqueryの一番上までスムーズスクロールするプラグインについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。