【HTML】(Javascript)ページトップに戻るボタンの実装

スポンサーリンク

ページトップに戻るボタンの実装

ページトップに戻るボタンを実装するコードをご紹介します。

  1. ▽css
  2. <style>
  3. page_top{
  4.   width: 50px;
  5.   height: 50px;
  6.   position: fixed;
  7.   right: 0;
  8.   bottom: 0;
  9.   background: #313131;
  10.   opacity: 0.6;
  11.   border-radius: 50%;
  12.   }
  13. page_top a{
  14.   position: relative;
  15.   display: block;
  16.   width: 50px;
  17.   height: 50px;
  18.   text-decoration: none;
  19. }
  20. page_top a::before{
  21.   font-family: FontAwesome;
  22.   content: '\f062';
  23.   font-size: 25px;
  24.   color: #fff;
  25.   position: absolute;
  26.   width: 25px;
  27.   height: 25px;
  28.   top: 0;
  29.   bottom: 0;
  30.   right: 0;
  31.   left: 0;
  32.   margin: auto;
  33.   text-align: center;
  34. }
  35. </style>
  36. ▽HTML内
  37. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
  38. <div id="page_top"><a></a></div>
  39. ▽javascript
  40. <script>
  41. var pagetop = document.getElementById('page_top');
  42. window.onload = function(){
  43.     pagetop.style.visibility = 'hidden';
  44.     // 表示・非表示設定
  45.     window.onscroll = function(){
  46.         var winSc = document.body.scrollTop || document.documentElement.scrollTop;
  47.         if(winSc > 100){
  48.             pagetop.style.visibility = 'visible';
  49.         } else {
  50.             pagetop.style.visibility = 'hidden';
  51.         }
  52.     }
  53. }
  54. pagetop.onclick = scrollToTop;
  55. //スクロール量を取得
  56. function getScrolled() {
  57.     var position = document.body.scrollTop || document.documentElement.scrollTop;
  58.     return position;
  59. }
  60. //トップに移動(スクロール)
  61. function scrollToTop() {
  62.     var scrolled = getScrolled();
  63.     window.scrollTo( 0, Math.floor( scrolled * 0.7 ) );
  64.     if ( scrolled > 1 ) {
  65.         window.setTimeout( 'scrollToTop()', 30 );
  66.     }
  67. }
  68. </script>

コードの解説

ページトップに戻るボタン自体は、CSSで作っています。
「FontAwesome」を使用していますので、URLリンクを忘れずに記載します。

また、このボタンはページのスクロール量(位置)に応じて表示されたり、非表示になったりと変化をつけています。
ページトップが表示されている場合はボタンは非表示になります。
ページ下部にスクロールすると表示されるようになります。

そして、実際にボタンをクリックされたときの動作は「scrollToTop()」で実装しています。
「window.scrollTo()」を用いると、ページ内の指定の座標を表示することができます。
これを応用してページトップに戻るまでに一定の割合でページ上部に戻るように動作するようにしていますので、なめらかにスクロールすることができます。
また、引数の係数を変更するとスピードを変えることができます。

以上、「(Javascript)ページトップに戻るボタンの実装」でした。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする