| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
Google
TOTAL PV
ページ内スムーススクロールボタン
あとで読むはてなブックマーク - ページ内スムーススクロールボタン | 2016年06月25日(土) | 0 | 0 | 記事編集
以前設置したページトップへスムーススクロールで戻るボタン…
ページ内スムーススクロールボタン
参考リンク
ページトップへ戻るボタンとカスタマイズ | ひいろんＢＬＯＧ
その動きが非常に気に入っているんで…
ページトップ以外にも
（コメント欄等）
スクロールさせたい…と思いカスタマイズしてみました。 参考にしたのはコチラのサイトさんです。
jQueryで簡単実装ページ内スクロール | WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
移動したい場所へのリンクを「#○○」とする事で
スムーススクロールが可能になるJavascriptです。

んでは、当ブログのソースを晒してみます。

※ソースは【jQuery】を既に導入されてる事が前提です。もしも未導入な方は当ブログ記事【jTweetsAnywhere導入】を参照いただくかググって調べてくださいませ(^^

まずは<head>〜</head>内へ下記の様に書き込みます。 
<script type="text/javascript">
$(function(){
	$("a[href^=#]").click(function(){
		var Hash = $(this.hash);
		var HashOffset = $(Hash).offset().top;
		$("html,body").animate({
			scrollTop: HashOffset
		}, 800);
		return false;
	});
});
</script>
後は下記の様に行き先とリンク設定をします。
【例：リンク名をlink1とした場合】
・スクロールさせたい場所
<div id="link1">link1</div>

・スクロールさせるためのリンク
<a href="#link1">link1へ移動</a>
どんな動きになるかは、このページ右にある
[Comments]や
[Trackback]をクリックしてもらえばわかるかと。。

応用編(?)として、
パズドラプロフィールのメニューも見てもらえば…
参考リンク
ひいろんのパズドラプロフィール
っつ〜事で、かなり簡単にページ内スクロールが可能になりました♪




尚、技術的解説は下記サイトさんにてご確認くださいです(^^
jQueryで簡単実装ページ内スクロール | WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
2016年06月25日(土) 16:49 | ネット > 改造メモ | 0 | 0 | 記事編集
<<前の記事：FeedWindを利用したツイート表示
はてなスター設置してみました ：次の記事>>
「ページ内スムーススクロールボタン」のリンクタグ
  • コメント[0]
  • Facebookコメント
  • はてブコメント
  • blogcircleコメント

まだこの記事へのコメントはありません。

コメントする

icons:

　
トラックバック

まだこの記事へのトラックバックはありません。

「ページ内スムーススクロールボタン」のトラックバックURL
ランキング参加中：応援(クリック)よろしくお願いします
　　ブログランキング・にほんブログ村へ　ブログ王ランキングに参加中！ .*:ﾟ(・ω・人)ﾟ:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:400R
ひいろんのつぶやき
最近放置中です(^^;
ワゴンセールで入手（爆
トレジャー魂最高っす！
  • 2035
  • 2725
  • 210
RSS1.0 Atom0.3

△TOP

Comments[0]
Trackback[0]
←PREV
NEXT→