トップに戻る効果の JavaScript 実装の例-jsチュートリアル-php.cn

トップに戻る効果の JavaScript 実装の例

黄舟

リリース： 2017-11-16 16:30:04

オリジナル

1447 人が閲覧しました

私たちの開発作業では、

JavaScriptを使用してトップに戻るコードを実装することがよくあると思います。今日は、この機能を説明します。 Back to Top 効果の JavaScript 実装例を詳しくご紹介します。ネイティブ js を使用して、単純に先頭に戻る効果を実現します。要件は比較的明確です。 1. ボタンの表示と非表示。 2. 途中で再びオンスクロールのクリアをトリガーします

タイマー

(まだ実装されていません。教えていただければ幸いです) コード:

<!-- 
Time:2016.8.4
author:Joel

Dom操作
1.document.getElementById    根据ID获取标签元素
2.document.documentElement.scrollTop    .ie滚动条数值
3.document.body.scrollTop  .chrome
4.document.documentElement.clientHeight  可视区域高度

事件运用
1.window.onload  加载完毕触发事件
2.onclick  点击触发事件
3.window.scroll  滚动条触发事件

定时器
1.setInterval()
2.clearInterval() 
-->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.btn:hover{
			background: blue;
		}
		.btn{
			display: none;
			height: 40px;
			width: 40px;
			background: red;
			position: fixed;
			left: 1410px;
			top: 600px;
		}
		.image{
			width: 1190px;
			margin:0 auto;
		}
	</style>
	<script type="text/javascript">
	      window.onload = function(){
		  var myBtn = document.getElementsByClassName("btn");
		  var clientHeight = document.documentElement.clientHeight;
          var timer = null;

		  window.onscroll = function(){
		  	var osTop = document.documentElement.scrollTop || document.body.scrollTop;

		  	if(osTop > clientHeight){
		  		myBtn[0].style.display = "block";
		  	}
		  	else{
		  		myBtn[0].style.display = "none";
		  	}
		    }
		    myBtn[0].onclick = function(){
		  	clearInterval(timer);
		  	timer = setInterval(function(){
              var osTop = document.documentElement.scrollTop || document.body.scrollTop;
              var spd = Math.floor((-osTop) / 1000);

              document.documentElement.scrollTop = osTop + spd;
              document.body.scrollTop = osTop + spd;

              if(osTop == 0){
              	clearInterval(timer);
              }
		  	},30);
		  }
	    }
	</script>
</head>
<body>
	<a href="javascript:;" class="btn">按钮</a> 
	<p class="image">
	  <img src="tb_bg.jpg" alt="">
	</p>
</body>
</html>

ログイン後にコピー

概要:

1. レンダリングdom flow の順に、hover は a より前に書かれた場合にのみ有効になり、それ以外の場合は上書きされます。

2. さまざまな属性メソッドの使用と単純なカプセル化。

3.getElementsByClassName はノードリストを返すので、配列の形式を使用します。

4. 異なるブラウザーでの互換性の問題を解決するには、タブキーの依存関係を放棄し、代わりに 2 つのスペースを使用します。

5. emmet プラグインのインストールと使用。

6. jq が提供するアニメーションを使用すると、トップに戻る効果をより簡単に実現できます。アンカーポイント方法は、特定の状況で使用することもできます。問題は、一部の詳細がブラウザの入力フィールドに表示されることです。