「ページトップ」アンカーリンクを任意の箇所に自動表示させる方法【jquery.scrollUp.js】｜DAD UNION

jquery.scrollUp.jsを使って、「ページトップ（PAGE TOP）」へのアンカーリンクを任意の箇所に自動表示させ、「ページトップ（PAGE TOP）」をクリックするとイイ感じにスクロールアップする方法をご紹介します。

Contents

「ページトップ」アンカーリンクを任意の箇所に自動表示させるCSSの記述
jquery.scrollUp.jsを使って、「ページトップ」アンカーリンクを任意の箇所に自動表示させるJavaScriptの記述
「ページトップ」アンカーリンクを任意の箇所に自動表示させるHTMLの記述
ページトップへのアンカーリンクを任意の箇所に自動表示させるデモページ
ソース元：scrollUp jQuery plugin

「ページトップ」アンカーリンクを任意の箇所に自動表示させるCSSの記述

※「ページトップ」アンカーリンク（#scrollUp）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:left;
	padding:15px 0;
}
p{
	padding-top:150px;
}
#idWrap{
	width:550px;
	margin:0 auto;
	text-align:center;
	height:4000px;
}
#scrollUp {
	bottom: 20px;
	right: 20px;
	background: #555;
	color: #fff;
	font-size: 12px;
	font-family: sans-serif;
	text-decoration: none;
	opacity: .9;
	padding: 10px 20px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	-webkit-transition: background 200ms linear;
	-moz-transition: background 200ms linear;
	transition: background 200ms linear;
}
#scrollUp:hover {
		background: #000;
}
-->
</style>

jquery.scrollUp.jsを使って、「ページトップ」アンカーリンクを任意の箇所に自動表示させるJavaScriptの記述

※jquery.min.js、jquery.scrollUp.jsファイルを読み込みます。$.scrollUp({オプション})でオプションにスクロールタグid、スクロールスピード、アンカーリンクテキスト等を設定します。オプション無し（コメントアウトしてます）でも動作します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.js"></script>
<script type="text/javascript">
/*
		$(function () {
			$.scrollUp();	//オプション無しでも良い様です。
		});
*/
		$(function () {
		    $.scrollUp({
		        scrollName: 'scrollUp', // Element ID
		        topDistance: '300', // Distance from top before showing element (px)
		        topSpeed: 300, // Speed back to top (ms)
		        animation: 'fade', // Fade, slide, none
		        animationInSpeed: 200, // Animation in speed (ms)
		        animationOutSpeed: 200, // Animation out speed (ms)
		        scrollText: 'PAGE TOP △', // Text for element
		        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
		    });
		});
</script>

「ページトップ」アンカーリンクを任意の箇所に自動表示させるHTMLの記述

※縦長ページ（4000px以上）を用意しました。必要に応じて変更して下さい。

<div id="idWrap">
        <h1>下にスクロールするとページトップへ（PAGE TOP △）のアンカーリンクをページの右下に自動表示します。</h1>
        <p>ずっと（4000px位）下にスクロールして見て下さい。</p>
        <div>↓↓↓↓↓↓↓↓↓↓</div>
</div>