| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
TOTAL PV
ページ内スムーススクロールボタン
あとで読むはてなブックマーク - ページ内スムーススクロールボタン | 2016年06月25日(土) | 0 | 0 | 記事編集
以前設置したページトップへスムーススクロールで戻るボタン…
ページ内スムーススクロールボタン
参考リンク
ページトップへ戻るボタンとカスタマイズ | ひいろんBLOG
その動きが非常に気に入っているんで…
ページトップ以外にも
(コメント欄等)
スクロールさせたい…と思いカスタマイズしてみました。
参考にしたのはコチラのサイトさんです。
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 | 記事編集
  • 0

  • 0

  • 0

  • 0

  • 0
  • 0
  • コメント[0]
  • Facebookコメント[]
  • はてブコメント[]
  • Twitter[]

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

コメントする

icons:

 
トラックバック

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

ランキング参加中:応援(クリック)よろしくお願いします
  ブログランキング・にほんブログ村へ ブログ王ランキングに参加中! .*:゚(・ω・人)゚:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
  • SEOブログパーツ
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:RX-8