【js】「ページトップへ戻る」ボタンをwordpressに実装する

最近のサイトに多い、下方にスクロールすると「ページトップへ戻る」ボタンが出現するスクリプト。

ここを参考に実装した。

*いくつか変更点あり。


【javascript】

jQuery(function() {
		
	//「topへ戻る」ボタンの設置
	var topBtn = jQuery('#pageTop');
	topBtn.hide();
	jQuery(window).scroll(function () {
		//画面上部から700スクロールした場合
		if (jQuery(this).scrollTop() > 700) {
			topBtn.fadeIn();
			
		} else {
			topBtn.fadeOut();
		}
	});
	topBtn.click(function () {
		jQuery('body , html').animate({
			scrollTop: 0
		}, 50);
		return false;
	});
});

*1:
wordpressの場合、jQueryの他にprototype.jsも使用している。
そのため「$」は「jquery」に置き換なければならない。(コンフリクト回避) -> 参考


【css】
#pageTop{
	display:none;
	padding:0px;
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:100;
}

*2:
display:none;を追加した。
これがないとDOM構築時に一瞬アイコンが表示されてしまうため。

【html】
<a id="pageTop" href="#page"><img src="./wp-content/themes/twentyeleven/images/icn_pagetop.png" alt="ページtopへ" width="32" height="32" /></a>



– – – – – – – – – – –
2013/06/06追記

wordpressプラグインがありました。
WordPress”トップに戻る”プラグインScroll to Top


【js】SyntaxHighlighterのコード対応一覧

SyntaxHighlighterのコード対応一覧
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

v3.0.83の対応一覧(2013/06/01現在)

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js