[jQuery]ページのTopへ戻る簡単実装

JavaScriptjavascript, jQuery

広告

今回はwebサービスやブログ等でよくあるページのtopへ戻るボタンを使った機能を簡単に実装しましたので、紹介していきたいと思います。jQueryを使うことによって実現しています。テスト用ということで、簡易な実装となっています。

実装方法

html

  <a id="returnTop" href="#"><div >topへ戻る</div></a>

css

サンプルとして作ったので、適当なボタンに該当するエリアを作成

#returnTop{
  width: 100px;
height: 50px;
position: fixed;
bottom: 10px;
right: 10px;
background-color: #009999;
}

JavaScript部分

document.addEventListener(“DOMContentLoaded”,()=>{
returnTop();
})
function returnTop() {
var $pageTop = $(“#returnTop”)
$pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$pageTop.fadeIn();
}
else {
$pageTop.fadeOut();
}
});
$pageTop.click(function () {
var href = $(this).attr(“href”);
var target = $(href == “#” || href == “” ? ‘html’ : href);
var position = $(target).offset().top;
$(“html, body”).animate({
scrollTop: position
}, 300, “swing”);
return false;
})
}

if ($(this).scrollTop() > 200) {
$pageTop.fadeIn();
} 
else {
$pageTop.fadeOut();
}
});

スクロールを200pxした時にボタンが表示される。また、それ以下のときは非表示となっています。200の部分を適切な量で指定すると良いと思います。

$pageTop.click(function () {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = $(target).offset().top;
$("html, body").animate({
scrollTop: position
}, 300, "swing");
return false;
})
}

pageTopが<a>タグの要素となっているので、
var href = $(this).attr(“href”);の部分で<a>タグの要素のhrefの部分を取得するようになっています。今回の例だと#を取得。
次の行でhrefが#か空文字の時にhtmlをという文字列をセットするようになっています。
ここで<html>タグと<a>タグの距離を設定することになります。
次の部分で速度300でスクロールするようになります。

まとめ

今回,jQueryを使うことによって簡単に、topへ戻るボタンの作成することができました。よく使われる機能ですので、今後も使っていきたいと思います。

広告

JavaScriptjavascript, jQuery