スクロール型のPAGETOPを導入してみたらWordPressサイトだけ実装できず。。
-
スクロール型のPAGETOPボタン機能を運営サイト群に実装している最中です。
以下のサイトの、http://www.webopixel.net/javascript/538.html
「1.ちょっとスクロールしたら「トップへ戻るボタン」を表示」
のタイプを使っております。しかし、静的HTMLのサイトや、MODXのサイトでは何ら問題なく動作するのですが、
WordPressで制作したサイトだけはうまく機能してくれず困っております。具体的な症状としましては、最初からページトップボタンが出現していて、
かつ、ボタンを押してもスクロールしてページの先頭へ移動するのではなく、
ノンスクロールの布津のアンカーリンク移動になってしまいます。
このスクロールボタンの正常な動きは、ある一定のスクロールがされると、透明度ゼロから不透明になるようにアニメしながら出現し、出現したページトップボタンをクリックするとスクロールしてページの先頭へ移動する、というものです。本機能をサイトに追加するにあたっておこなったことは以下です。
(1) head内に外部のjqueryのJSファイルを呼び出す記述を入れた
以下です。
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>(2) 上記(1) のソースの前でなく後に元々入れていたJSファイルの中の一番最後に、
以下のソースを追加した。$(function() { var topBtn = $('#page-top'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });
(3) HTMLソースの終了bodyタグの直前ぎみに以下のHTMLソースを追加した。
リンク先のwrapperは、当方のHTMLソースのbodyタグ開始直後あたりにあるdiv idタグ名。<p id="page-top"><a href="#wrapper">↑</a></p>
(4) 外部CSSファイルにページトップボタンの装飾記述をおこなった。
以下です。#page-top { position: fixed; bottom: 20px; right: 20px; font-size: 2em; } #page-top a { background: #666; filter: alpha(opacity=50); -moz-opacity: 0.50; -khtml-opacity: 0.50; opacity: 0.50; text-decoration: none; color: #fff; width: 50px; padding: 10px; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #999; }
なぜかWordPressだけ実装できず困惑しております。
解決方法がもしわかるようでしたらご教授くださいましたら幸いです。
宜しくお願いいたします。
- トピック「スクロール型のPAGETOPを導入してみたらWordPressサイトだけ実装できず。。」には新たに返信することはできません。