我试图让这个滚动到顶部的脚本在WordPress中工作，但它没有滚动。我得到错误：
未捕获的TypeError：无法读取未定义（…）的属性“backToTopLink”
它适用于我从Google获得的jQuery，但不适用于jQuery的默认WordPress版本。
这是js文件：
(function ($) {
$.extend({
backToTopLink: function (options) {
//default settings
var settings = $.extend({
navigatorZIndex : \'999999\', //Z-index of the navigator
navigatorBorderRadius : \'20%\', //border radius of the navigator, set 100% if you want to make a circle navigator
navigatorBgcolor : \'#000\', //navigator background color
navigatorBgcolorHover : \'#000\', //navigator background color (when hovering, by default same color)
navigatorOpacity : 0.6, //opacity of the navigator
navigatorOpacityHover : 0.9, //opacity of the navigator when hovering
navigatorWidth : 30, //navigator width size
navigatorHeight : 30, //navigator height size
navigatorPadding : 5, //navigator padding size
navigatorPosition : \'rb\', //lb (left bottom) or rb (right bottom),
navigatorPosPercent : 3, //percentage position
arrowImgSrc : \'\', //image source
arrowColor : \'#fff\', //color of the div arrow
arrowWidth : 10, //width of the div arrow
arrowMarginTop : 8, //margin top of the arrow image
arrowImgMarginTop : 8, //margin top of the arrow image (apply if using image only)
scrollDelay : 1000 //scrolling delay
}, options);
//we check if the top navigator link has already been created.
if ($("#top-navigator").length == 0) {
$("body").prepend("<div id=\'top-navigator\'><div id=\'arrow-up\'></div></div>");
//styles for the top-navigator
$("#top-navigator").css({
\'position\' : \'fixed\',
\'text-align\' : \'center\',
\'cursor\' : \'pointer\',
\'display\' : \'none\',
\'z-index\' : settings.navigatorZIndex,
\'border-radius\' : settings.navigatorBorderRadius,
\'background\' : settings.navigatorBgcolor,
\'opacity\' : settings.navigatorOpacity,
\'width\' : settings.navigatorWidth,
\'height\' : settings.navigatorHeight,
\'padding\' : settings.navigatorPadding
});
$("#top-navigator").hover(
function() {
$(this).css({
\'opacity\' : settings.navigatorOpacityHover,
\'background\' : settings.navigatorBgcolorHover
});
}, function() {
$(this).css({
\'opacity\' : settings.navigatorOpacity,
\'background\' : settings.navigatorBgcolor
});
}
);
switch(settings.navigatorPosition){
case "lb":
//left bottom
$("#top-navigator").css({
\'left\' : settings.navigatorPosPercent + \'%\',
\'bottom\' : settings.navigatorPosPercent + \'%\'
});
break;
default:
//right bottom
$("#top-navigator").css({
\'right\' : settings.navigatorPosPercent + \'%\',
\'bottom\' : settings.navigatorPosPercent + \'%\'
});
break;
}
if(settings.arrowImgSrc != ""){
$("#arrow-up").html("<img src=\'" + settings.arrowImgSrc + "\' border=\'0\'/>");
$("#arrow-up").css("margin-top", settings.arrowImgMarginTop);
}else{
var borderProp = settings.arrowWidth + \'px solid transparent\';
var borderBotProp = settings.arrowWidth + \'px solid \' + settings.arrowColor;
$("#arrow-up").css({
\'width\' :\'0\',
\'height\' :\'0\',
\'border-left\' :borderProp,
\'border-right\' :borderProp,
\'border-bottom\' :borderBotProp,
\'font-size\' :\'0\',
\'line-height\' :\'0\',
\'margin\' :\'0 auto\',
\'display\' :\'inline-block\',
\'margin-top\' : settings.arrowMarginTop
});
}
$(window).scroll(function () {
if ($(this).scrollTop()) {
$(\'#top-navigator:hidden\').stop(true, true).fadeIn();
} else {
$(\'#top-navigator\').stop(true, true).fadeOut();
}
});
$("#top-navigator").click(function () {
//reset the value
$(this).css({
\'opacity\' : settings.navigatorOpacity,
\'background\' : settings.navigatorBgcolor
});
$(\'html, body\').animate({ scrollTop: $(\'html\').offset().top }, settings.scrollDelay);
});
}
}
});
})(jQuery);
在中
functions.php, 我这样注册JS文件：
function scroll_to_top() {
wp_enqueue_script( \'scrolltotop\', get_template_directory_uri() . \'/js/jquery.backtotoplink.js\', array(), \'1.0.0\', true );
}
add_action( \'wp_enqueue_scripts\', \'scroll_to_top\' );
在页面上，就在
</body> 添加的标记I：
<script>
$.backToTopLink({});
</script>
这可能与如何声明
$, 但我不知道怎么做。
最合适的回答,由SO网友:Dave Romsey 整理而成
从另一个JavaScript文件中初始化Scroll to Top脚本。我想jquery.backtotoplink.js 来自第三方，不应修改。
例如，在主题中，JavaScript可以按如下方式排队：
function wpse247853_scripts() {
// jquery.backtotoplink.js depends on jquery
wp_enqueue_script( \'scrolltotop\', get_template_directory_uri() .
\'/js/jquery.backtotoplink.js\', array( \'jquery\' ), false, true );
// Enqueue a general purpose JS file here. It will initialize the scroll
// to top script. It depends on jquery and scrolltotop.
wp_enqueue_script( \'wpse-theme-js\', get_template_directory_uri() .
\'/js/wpse-theme.js\', array( \'jquery\', \'scrolltotop\' ), false, true );
}
add_action( \'wp_enqueue_scripts\', \'wpse247853_scripts\' );
在此处初始化滚动到顶部脚本：
/js/wpse-theme.js
( function( $ ){
// Initialize the scroll to top plugin
$.backToTopLink( {} );
// ...Do some other jQuery stuff.
})( jQuery );
应删除以前用于初始化滚动到顶部脚本的代码：
<script>
$.backToTopLink({});
</script>
下面是脚本的演示：
