Skip to content

Instantly share code, notes, and snippets.

@kakari2

kakari2/jQuery_InPageScrollSample.html

Created December 8, 2015 17:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kakari2/a61370268c5a1fa9442b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kakari2/a61370268c5a1fa9442b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jQuery_InPageScrollSample.html
<!doctype html>
<html>
<head>
<meta charset="Shift-JIS">
<title>タイトル</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<style type="text/css">
#pageTop{
background:#DDD;
border-radius:5px;
color:#FFF;
padding:20px;
position:fixed;
bottom:20px;
right:20px;
}
#pageTop:hover{
background:#EEE;
}
</style>
<script>
$(function() {
var topBtn = $('#pageTop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
$(function() {
$('body').delay(100).animate({
scrollTop: $(document).height()
},1500);
/*
//animationする必要がなければ
setTimeout(function() {
window.scroll(0,$(document).height());
},0);
*/
});
});
</script>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<div id="site-box">
<div id="a-box">
<h1><a href="#d-box">h1 サイトタイトル</a></h1>
ホームページの説明文 <br />
テキスト　テキスト　テキスト　テキスト　テキスト　テキスト
</div>
<div id="b-box">
<h2 id="#d-box">h2 ページタイトル</h2>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>
<a id="pageTop" href="#contents">ページトップへ</a>
</div>
<div id="c-box">
<div class="category">カテゴリー１</div>
<ul>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul>
<div class="category">カテゴリー２</div>
<ul>
<li>ページ４</li>
<li>ページ５</li>
<li>ページ６</li>
</ul>
</div>
<div id="d-box">
copyright (c) oooo.com All right reserved.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment