1.自分自身のゆっくりとしたペース
彼はエネルギーアクセシビリティ、SVGやキャンバスの分野でこれらの小さな集会を研究の多くを過ごした長年にわたり、非常に多くのフロントエンドの新機能、新技術は、タイムリーな注意に失敗して、フィールドの新しいCSS3プロパティがあることを理解し、領域JSがあります以前の研究と比較して新しいES6 / ES7文法などを含む新しいAPIは、ペースは本当に遅いです。たとえば、この記事では、CSSやJSのいずれかをスムーズスクロールをご紹介します、最近のブラウザは、プロパティやメソッドのネイティブを提供していますが、ほとんどの年でした、と私は最近、新しい技術に、数年前にリアルタイムの注意をことを学びました自身が明確なコントラストを形成します。
SVGやキャンバス財団より強固で、より詳細な内容。しかし、私は重力シフトの中心の幅方向を学び、そしてゆっくりと取り残さトウモロコシのそれらの耳をピックアップし始めています。
濡れ乾燥して滑りやすいから2
ページ次の段落のHTMLがあると仮定すると：
<a href="#" rel="internal">返回顶部</a>
ページがちょうど愛の嵐のような、すぐに泣くあなたがどんな反応を持っていないブラウザ、速いスピード、激しいラリーの一番上に配置するために、「しゃぶしゃぶ」になるとき、私たちはこのテキストリンク「トップ」をクリックしてくださいヘルプあなたのガードをオフにしましょう、脳は常にリコール：「???どこ私は私がちょうど何をしたか、何者です。」
すべてのこれらの反応は、私たちのローリング効果があまりにも乾燥している最終的な分析を生成し、機械的な鈍い精神は、スタイルを理解していません。
人々は、我々はウェブサイトで行うので、人々を与えることです、それは感情の自然いっぱいで、感情的な動物である、ではないので、ドライなので、濡れて滑りやすいローリング効果、ユーザ体験は良いだろう。
雪の滑らかな肌、しっとりフル唇は、常に人々の心ではないでしょうか？我々はそうすることができ、対話した場合、それはまた、心にユーザーを可能にします。
ブラウザは昨年末から、ブラウザのネイティブスムーズスクロールの位置、CSSのサポートを開始した、これを実現しているようだ scroll-behaviorプロパティとJSの scrollIntoView()できる方法を。
二、CSSのスクロール動作とスムーズなスクロール
scroll-behavior:smoothコンテナ要素のスクロールに書かれた、あなたは、コンテナ（非マウスジェスチャがトリガー）スムーズスクロールになってみましょうことができます。
初期値は'auto'。
よりシンプルかつ実用的な用途
実際には、scroll-behaviorそれほどの花のヘッドを使用して、あなたは、このような文を覚えています-
スムーズに十分：場所プラススクロール動作をスクロールする必要な方！
彼は、彼らはあなたが追加することができますブラウザの互換性を制御していないか、慣れていない心配しないでください。これは、無料の宝くじのお金のようなものだ勝てていない、それは問題ではありませんし、何も失わないために、優れた自然を受賞し、ケーキの上のアイシング！scrol-behavior:smoothこれは尿中です。
例えば、PCのブラウザでは、デフォルトのWebページのスクロールがある<html>ほとんどのモバイル最後に、ラベル上<body>のラベルに、私は、このような文を追加します。
html, body { scroll-behavior:smooth; }
この場合は、以下の「トップ」リンクをクリックして、あなたが一番上にスクロールを滑らかにします（真のリアルタイムの結果を、あなたは、tryをクリックすることができます）。
次のようにHTMLコードは次のとおりです。
<a href="#">返回顶部</a>
この観点から、CSSはブラウザの業界は、このようなルールを追加することができますリセットします。
html, body { scroll-behavior:smooth; }
三、スムーズなスクロールとJSのscrollIntoView
DOM要素scrollIntoView()法は、IE6ブラウザはまた、要素が表示領域、ローリングコンテナをトリガーすることによって達成ポジショニングを入力することができ、ネイティブJSのAPIをサポートしています。
ChromeとFirefoxのブラウザがCSSをサポートするために始めたと scroll-behavior財産を、正しい方法で、scrollIntoView()この方法は、スムーズスクロールである引数を作ることができる追加のパラメータを、サポートするようにアップグレードされました。
構文は次のとおりです。
target.scrollIntoView({
behavior: "smooth"
});
私達はちょうど、私たちはスムーズスクロールページの位置を見ることができるリンク先のページ、画面オフの最初のリンクのスクロールを開き、以下のコードに似コンソールを入力する必要があります。
document.links[0].scrollIntoView({
behavior: "smooth"
});
下のビデオのスクリーンショット：
その他：
scrollIntoView()アップグレード方法の後、サポートに加えて'behavior'、だけでなく、'block'および'inline'その他のパラメータ、我々はMDNのマニュアルを参照してくださいすることができます興味を持っています。- 当社のウェブサイトは、CSSのによって設定されている場合
scroll-behavior:smooth、宣言、その後、我々は直接実行target.scrollIntoView()方法は、もはや追加設定する必要があり、スムーズなスクロールできなくなりますbehaviorパラメータを。たとえば、あなたがこの記事のオリジナル新宇宙ステーションに閲覧されている場合は、コンソールを開き、以下のコードを実行し、あなたはスムーズスクロールの効果を見ることができます：
document.forms[0].scrollIntoView();
四、JSスムーズスクロール下位互換性処理
JSは、スムーズなスクロールを実現することは困難ではない、でjQueryのanimate()方法：
scrollContainer.animate({
scrollTop: 0
});
または使用requestAnimationFrameのAPIをネイティブなJSを達成することができます。例えば、私の方法の以下のスケッチ：
/**
@description 页面垂直平滑滚动到指定滚动高度
@author zhangxinxu(.com)
*/
var scrollSmoothTo = function (position) {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
return setTimeout(callback, 17);
};
}
// 当前滚动高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 滚动step方法
var step = function () {
// 距离目标滚动距离
var distance = position - scrollTop;
// 目标滚动位置
scrollTop = scrollTop + distance / 5;
if (Math.abs(distance) < 1) {
window.scrollTo(0, position);
} else {
window.scrollTo(0, scrollTop);
requestAnimationFrame(step);
}
};
step();
};
後のスローダウン転がり、あなた自身の所持緩和アニメーションJS小さなアルゴリズムを使用します。
私たちは、直接ページの最上部にスクロール滑らかにしたい、次の例を使用します。
scrollSmoothTo(0);
その上に。
それは、ブラウザのネイティブ処理のスムーズスクロールをサポートするために、どのように困難であり、ブラウザをサポートするか、JS処理の古い方法を使用していません。
私は、次の判断な取引だったJS：
if (typeof window.getComputedStyle(document.body).scrollBehavior == 'undefined') {
// 传统的JS平滑滚动处理代码...
}
これは、シームレスにドッキングすることができます。
言語を終了V.結論結論
魂のない機械のようないかなる個人の資質の記事ではありません。ミス張允の写真は、家のリーダーシップを信頼していない、著作権侵害の恐れのためにドアに来て、ちょうど興味のないよう、水を飲むように、次の、そして美しい女性の今それらの写真を配った......
私はそのような......馬としての役割やラベルを変更する思ったんだけど！
ここで私は為替の円学習をお勧めしますヒントです：767 273 102、最も基本的なHTML + CSS + JSから学んでいるHTML5プロジェクト実際の学習教材のフロントエンドを移動するには、[特殊効果、ゲーム、プラグインパッケージのデザインパターンを冷却します]私たちは、すべての小さなフロントエンドのパートナーに与えられ、仕上げされています。2019年最新の技術、同期およびビジネスニーズ。友人は、フロントエンド技術のタイミングを説明するために、毎日、大きな牛があるだろう、学習交流の内側にあります！