GitHub で見つけた簡単なスクリプトを使用して、WP 用のプラグインを作成しました。プラグインは、サイトの管理者以外のページに JS をロードするため、正常に動作します。
ただし、JS は特定の場所でのみ発火します。
このスクリプトは、すべての内部リンクを見つけて、ページ上の目的のリンク先までスムーズにスクロールできるようにすることになっています。
サイトの素晴らしいサンプル ページを次に示します: http://bigbrownbeaver.net/have-me-build-your-site/
左側のページの一番下に、ページの上部へのリンクがあります。クリックすると、このプラグインの JS が起動し、スムーズに一番上までスクロールします。でも...
ページ上の他の内部リンクのいずれかをクリックすると (ページの上部、2 つの暗い列のいずれかの内側にかなりの数のリンクがあります)、この同じスクリプトは起動しませんか???
私は何日も答えを見つけようとしましたが、途方に暮れています. 誰かが私と一緒にこれを追跡できますか? プラグインのコード全体は次のとおりです。
<?php
/*
Plugin Name: Smooth Scrolling Links
Plugin URI: http://bigbrownbeaver.net
Description:Adds a js smooth scrolling effect to all links on your site that point to other parts of a page or post
Version: 1.0
Author: Aaron
Author URI: http://bigbrownbeaver.net/newsletter/
*/
/* Copyright 2013 Aaron > BigBrownBeaver.Net
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as
published by the Free Software Foundation.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
//load required script
add_action('wp_head', 'smooth_scrolling_links');
function smooth_scrolling_links() { ?>
<?php if ( !is_admin() ) { ?>
<script type="text/javascript">
(function($) {
$.fn.smoothscrolling = function() {
function scrollto(destination, hash) {
// Change the hash first, then do the scrolling.
var scrollmem = $(document).scrollTop();
window.location.hash = hash;
$(document).scrollTop(scrollmem);
$("html,body").animate({
scrollTop: destination
}, 800);
}
if (typeof $().on == "function") {
$(document).on('click', 'a[href^="#"]', function() {
var href = $(this).attr("href");
if ($(href).length == 0) {
var nameSelector = "[name=" + href.replace("#", "") + "]";
if (href == "#") {
scrollto(0, href);
}
else if ($(nameSelector).length != 0) {
scrollto($(nameSelector).offset().top, href);
}
else {
// fine, we'll just follow the original link. gosh.
window.location = href;
}
}
else {
scrollto($(href).offset().top, href);
}
return false;
});
}
else {
$('a[href^="#"]').click(function() {
var href = $(this).attr("href");
if ($(href).length == 0) {
var nameSelector = "[name=" + href.replace("#", "") + "]";
if (href == "#") {
scrollto(0, href);
}
else if ($(nameSelector).length != 0) {
scrollto($(nameSelector).offset().top, href);
}
else {
// fine, we'll just follow the original link. gosh.
window.location = href;
}
}
else {
scrollto($(href).offset().top, href);
}
return false;
});
}
};
})(jQuery);
jQuery(document).ready(function(){
jQuery().smoothscrolling();
});
</script>
<?php }
}