riina-k.net

音楽・小説・プログラミングを手がけるリイナの拠点。

テーマ「FLAT」のHTML5化

導入しているWordPressテーマ「FLAT」をHTML5に対応させてみる。

……しかし、WordPress本体が直接HTMLを吐き出している箇所が多くあるため、完全なHTML5化は本体を改造しない限り不可能。
そんなわけで、「div id=”header”」を「header」に書き換えるなど、基本的なタグの置き換えに留まる。

と、ここで問題が。
このテーマは常に右下に「ページ最上部に戻るためのボタン」が表示されているが、
リンク先が「#header」だったため、headerタグに置き換えてしまうとリンクが機能しなくなる。
そこで、無条件でスクロールするようjavascriptを書き換えてみた。

scroll.js

	jQuery('a[href*=#header],a[href*=#respond]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var $target = jQuery(this.hash);
			$target = $target.length && $target || jQuery('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				jQuery('html,body').animate({ scrollTop: targetOffset }, 1200, 'quart');
				return false;
			}
		}
	});

これを以下のように書き換えて、リンク先が「#header」の場合は無条件でページの先頭までスクロールするように。

	jQuery('a[href*=#header]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			jQuery('html,body').animate({ scrollTop: 0 }, 1200, 'quart');
			return false;
		}
	});

	jQuery('a[href*=#respond]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var $target = jQuery(this.hash);
			$target = $target.length && $target || jQuery('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				jQuery('html,body').animate({ scrollTop: targetOffset }, 1200, 'quart');
				return false;
			}
		}
	});
  1. コメント 0

  1. トラックバック 0

return top