Loading...

Single Post

HOME > post > Web > jQueryで作る「ページトップへ戻る」

jQueryで作る「ページトップへ戻る」

| Web
ウェブサイト素材

多くのウェブサイトで当たり前のように設置されており、ユーザビリティーの向上につながるページトップスクロールのコードを掲載します。様々な制作方法があると思いますが、今回紹介する方法にはjQueryを用います。動きがスムーズで簡単に設置できますのでコピーペーストでご自由にお使いください。

HTML


<div id="top_scroll">
    <a href="#" id="page-top1"><img src="images/example_top.png" alt="ページトップスクロール"></a>
</div>

CSS


	
#top_scroll{ 
	position: relative; 
	z-index: 100; 
	margin: 0; 
	padding: 0; 
}

#page-top1{
	display: block;
	position: fixed;
	z-index: 9999;
	bottom: -250px;
	right: 10px;
	width: 35px;
	height: 35px;
	padding: 0;
	color: #222;
	text-align: center;
	text-decoration: none;
	transition: 1s;
        -webkit-transition: 1s;
}

#page-top1:hover{ 
	background: ;
	transform: translateY(-10px);
}

#top_scroll:hover{
	background: #fff;
}


jQuery


 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

	  $(function(){
	  
	  var pageTop1 = $("#page-top1");
	  pageTop1.click(function () {
	    $('body, html').animate({ scrollTop: 0 }, 500);
	    return false;
	  });
	  $(window).scroll(function () {

	    if($(this).scrollTop() >= 200) {
	      pageTop1.css( "bottom", "30px" );
	    } else {
	      pageTop1.css( "bottom", "-85px" );
	    }
	  });


	});

</script>

デモは、マウスオーバー時にボタンがアニメーションで動きます。上記コードを参考にカスタムしていますので、ご確認頂けると嬉しいです。

おまけ

もう1つ超シンプルなスクロールトップをご紹介致します。正直こちらのほうが実装の難易度は低いと思います。

HTML


<div id="stop" class="scrollTop">
  <a href="">Top</a>
</div>

CSS


.scrollTop {
	position: fixed;
	right: 20px;
	bottom: 30px;
	opacity: 0;
	transition: all 0.4s ease-in-out 0s;
}

.scrollTop a {
	font-size: 18px;
	color: #fff;
	background: #1856C9;
	padding: 20px;
		  
}
.scrollTop a:hover{
        background: #44CAFF;
}

jQury


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<script type="text/javascript">

	 $(document).ready(function() {
  

	  // declare variable
	  var scrollTop = $(".scrollTop");

	  $(window).scroll(function() {
	    // declare variable
	    var topPos = $(this).scrollTop();

	    // if user scrolls down - show scroll to top button
	    if (topPos > 100) {
	      $(scrollTop).css("opacity", "1");

	    } else {
	      $(scrollTop).css("opacity", "0");
	    }

	  }); // scroll END

	  //Click event to scroll to top
	  $(scrollTop).click(function() {
	    $('html, body').animate({
	      scrollTop: 0
	    }, 800);
	    return false;

	  }); // click() scroll top EMD

    }); // ready() END

	</script>

デモは、マウスオーバー時にボタンがアニメーションで動きます。上記コードを参考にカスタムしていますので、ご確認頂けると嬉しいです。

まとめ

この記事を掲載しながら、スクロールトップを始めて実装した時の事を思い出しました。無駄にボタンを押してスルスル上に移動する画面を見るだけで楽しくなっていました。

関連記事

Contact Page