jQuery・タッチデバイスでも滑らかなスムーススクロールを作りました [IE8対応]

150822_001

2016/07/08　jQuery 2.2 対応に修正しました。

デモを見る

クライアントから「スマホでスムーススクロールがカクつくの、何とかなりません？」とご要望を頂いたため、Velocity.js を利用して作成。

検証済みブラウザとOS

IE 8～
Firefox
Google Chrome
Safari
Windows 7
OS X Yosemite
iOS 8
Android 4.1

要点とコード

よくあるコードを、Velocity.js 用に書き換えただけ
ページトップは、a グではなく id 指定にしている

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="js/smoothScroll.js"></script>

<body>
<nav>
<ul>
	<li><a href="#block-01"><i class="fa fa-hand-o-down"></i> メニュー01</a></li>
	<li><a href="#block-02"><i class="fa fa-hand-o-down"></i> メニュー02</a></li>
	<li><a href="#block-03"><i class="fa fa-hand-o-down"></i> メニュー03</a></li>
</ul>
</nav>


<h1 id="block-01">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</h1>
<img src="//placeimg.com/640/480/any">
<p>テキスト</p>

<h1 id="block-02">親譲りの無鉄砲で小供の時から損ばかりしている</h1>
<p>テキスト</p>

<h1 id="block-03">つれづれなるまゝに、日暮らし</h1>
<img src="//placeimg.com/640/480/any">
<p>テキスト</p>

<h1>Lorem ipsum dolor sit amet</h1>
<p>テキスト</p>


<span id="pagetop">
<i class="fa fa-hand-o-up"></i>
</span>
</body>

<body>

<nav>

<ul>

</ul>

</nav>

<h1 id="block-01">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</h1>

<h1 id="block-02">親譲りの無鉄砲で小供の時から損ばかりしている</h1>

<h1 id="block-03">つれづれなるまゝに、日暮らし</h1>

<h1>Lorem ipsum dolor sit amet</h1>

</span>

</body>

#pagetop {
	color: white;
	@include fs(24);
	cursor: pointer;
	position: fixed;
	right: 40px;
	bottom: 40px;
	padding: 15px 20px;
	background: #666;

	&:hover {
		@include opacity(0.7);
	}
}

#pagetop {

color: white;

@include fs(24);

cursor: pointer;

position: fixed;

right: 40px;

bottom: 40px;

padding: 15px 20px;

background: #666;

&:hover {

@include opacity(0.7);

}

/*
Smooth scroll with Velocity.js
Author: KEITA HIRAI
URL: keitahirai.net
*/
$(function() {
	// アンカーリンク
	$('a[href^="#"]').click(function() {
		var link = $(this).attr("href"),
			target = $(link === "#" || link === "" ? "html" : link);

		target.velocity("scroll", {
			duration: 400,
			easing: "ease-out"
		});
		return false;
	});

	// pagetop
	$("#pagetop").click(function() {
		$("body").velocity("scroll", {
			duration: 400,
			easing: "ease-out"
		});
	});
});

Smooth scroll with Velocity.js

Author: KEITA HIRAI

URL: keitahirai.net

$(function() {

// アンカーリンク

$('a[href^="#"]').click(function() {

var link = $(this).attr("href"),

target = $(link === "#" || link === "" ? "html" : link);

target.velocity("scroll", {

duration: 400,

easing: "ease-out"

});

return false;

});

// pagetop

$("#pagetop").click(function() {

$("body").velocity("scroll", {

duration: 400,

easing: "ease-out"

});

カスタマイズ

#pagetop ではなく a タグにしたい

jQueryの該当コードをコメントアウトして、普通にリンクを設置すればOK。

<span id="pagetop">
<a href="#"><i class="fa fa-hand-o-up"></i></a>
</span>

</span>

問題点

iPod touch 第5世代で引っかかりが発生する: 既にレンダリングはAndroidに負けているのでしょうがない。iPad は問題なし。

鼻ちょうちん

jQuery・タッチデバイスでも滑らかなスムーススクロールを作りました [IE8対応]

検証済みブラウザとOS

要点とコード

カスタマイズ

問題点

コメントを投稿する返信をキャンセル

jQuery・タッチデバイスでも滑らかなスムーススクロールを作りました [IE8対応]

検証済みブラウザとOS

要点とコード

カスタマイズ

問題点

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル