使用jQuery自定义插件进行功能拓展, 实现’回到顶部’这个小功能
【backToTopIndex.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery 实现回到顶部</title>
<script type="text/javascript" src="jquery-2.1.3.js"></script>
<script type="text/javascript" src="jQuery.backToTop.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.backToTop({
trigger: 100, //页面滚动到对应的值触发显示向上的指示
bottomOffset: 70, //底部偏移
locationOffset: 50, //指示整体对于右边的偏移
});
});
</script>
</head>
<body style="height: 90000px; text-align:center;">
jQuery 实现回到顶部!~
</body>
</html>【jQuery.backToTop】
/*
实现回到顶部的一个指示, 指示的形状为一个四角都有弧度的矩形, 中间一个向上的三角形的箭头
维护时可以控制指示的位置, 如左或者右, 距离浏览器页面的位置, 回到顶部的速度等
具有可移植性
*/
(function ($){
$.backToTop = function(userParams) {
//****一些默认参数*****
var params = $.extend({
location:'right', //指示位于页面的右面
locationOffset:20, //指示相对于浏览器最右面的距离, 在backToTopIndex.html中可以指定
bottomOffset:10, //指示相对于浏览器底部的距离, 在backToTopIndex.html中可以指定
containerRadius:10, //指示的矩形四角的弧度
containerClass:'backToTopContainer', //指示的容器类
arrowClass:'backToTopArrow', //指示中的三角形
alwaysVisible:false,
trigger:500,
entryAnimation:'fade',
backToTopSpeed:'slow', //回到顶部的速度
hideUnderWidth:500, //当浏览器的宽度小于指定大小将不显示指示
containerColor:'#000', //指示的主体为黑色
arrowColor:'#fff', //箭头的颜色为白色
title:'', //显示回到顶部的提示, 默认不显示, 在backToTopIndex.html中可以指定
titleAsText:false, //是否存在title
titleAsTextClass:'backToTopText'
},userParams);
//在文档body中加入指示类的外框和箭头
$('body').append('<div style="display:none" class="'+params.containerClass+'"></div>');
var container = $('.'+params.containerClass);
$(container).html('<div class="'+params.arrowClass+'"></div>');
var arrow = $('.'+params.arrowClass);
//检查参数
var location = params.location;
if(location != 'right' && location != 'left'){
location = 'right';
} //如果位置被指定了除左右以外的值, 使位置置于右
var locationOffset = params.locationOffset;
if(locationOffset < 0){
locationOffset = 0;
}
var bottomOffset = params.bottomOffset;
if(bottomOffset < 0){
bottomOffset = 0;
}
var containerRadius = params.containerRadius;
if(containerRadius < 0){
containerRadius = 0;
}
var trigger = params.trigger;
if(trigger < 0){
trigger = 0;
}
var hideUnderWidth = params.hideUnderWidth;
if(hideUnderWidth < 0){
hideUnderWidth = 0;
}
var checkColor = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i;//正则表达式验证颜色名是否合法
var containerColor,arrowColor;
if(checkColor.test(params.containerColor)){
containerColor = params.containerColor;
} //若指定颜色合法就使用指定的颜色, 否则指示框使用黑色, 箭头使用白色
else {
containerColor = '#000';
}
if(checkColor.test(params.arrowColor)){
arrowColor = params.arrowColor;
}
else{
arrowColor = '#fff';
}
if(params.title === ''){
params.titleAsText = false;
}
//**********设置容器框的样式*******
var containerStyle = {};
containerStyle = {
position:'fixed', //相对于浏览器页面固定
width:40,
height:40,
background:containerColor,
cursor:'pointer'
};
containerStyle['bottom'] = bottomOffset;
containerStyle[location] = locationOffset;
containerStyle['border-radius'] = containerRadius;
$(container).css(containerStyle);
if(!params.titleAsText){
$(container).attr('title',params.title);//
}
else{
$('body').append('<div class="'+params.titleAsTextClass+'">'+params.title+'</div>');
var textContainer = $('.'+params.titleAsTextClass);
$(textContainer).attr('style',$(container).attr('style'));//
$(textContainer).css('background','transparent')
.css('width',80)
.css('height','auto')
.css('text-align','center')
.css(location,locationOffset-20);//
var containerNewBottom = $(textContainer).height() + 10;
$(container).css('bottom','+='+containerNewBottom+'px');
}
//*******************设置箭头样式*****************
var arrowStyle = {}; //箭头的实现原理:将一个矩形分为上下左右四个三角形, 再将其他三个三角形的颜色设置为透明色, 即选定要显示的三角形
arrowStyle = {
width:0,
height:0,
margin:'0 auto',
'padding-top':13,
'border-style':'solid',
'border-width':'0 10px 10px 10px',
'border-color':'transparent transparent '+arrowColor+' transparent'
};
$(arrow).css(arrowStyle);
//*当浏览器的宽度调整为小于特定宽度时, 不显示指示*
var isHidden = false; //原本不隐藏
$(window).resize(function(){
if($(window).outerWidth() <= hideUnderWidth){
isHidden = true;
animationFade($(container),'hide',params.entryAnimation)
if(textContainer)
animationFade($(textContainer),'hide',params.entryAnimation)
}
else {
isHidden = false;
$(window).trigger('scroll');
}
});
//当以特定的宽度打开页面时
if($(window).outerWidth() <= hideUnderWidth){
isHidden = true;
$(container).hide();
if(textContainer)
$(textContainer).hide();
}
//********显示指示***********
if(!params.alwaysVisible){//没有显示指示时判定页面滚动是否构成显示条件
$(window).scroll(function(){
if($(window).scrollTop() >= trigger && !isHidden){
animationFade($(container),'show',params.entryAnimation);
if(textContainer)
animation($(textContainer),'show',params.entryAnimation);
}
if($(window).scrollTop() < trigger && !isHidden){
animationFade($(container),'hide',params.entryAnimation);
if(textContainer)
animation($(textContainer),'hide',params.entryAnimation);
}
});
}
else{
animationFade($(container),'show',params.entryAnimation);
if(textContainer)
animation($(textContainer),'show',params.entryAnimation);
}
//******如果打开浏览器时页面的滚动高度已经构成显示条件********
if ($(window).scrollTop() >= trigger && !isHidden) {
animationFade($(container), 'show', params.entryAnimation);
if (textContainer)
animationFade($(textContainer), 'show', params.entryAnimation);
}
//************单击指示时*************
$(container).on('click',function(){
$('html,body').animate({scrollTop:0},params.backToTopSpeed);
return false;
});
$(textContainer).on('click',function(){
$('html,body').animate({scrollTop:0},params.backToTopSpeed);
return false;
});
};
//*******消失动画********
function animationFade(obj, type, animation){
if(type == 'show'){
switch(animation){
case 'fade':
obj.fadeIn();
break;
case 'slide':
obj.slideDown();
break;
default:
obj.fadeIn();
}
}
else{
switch(animation){
case 'fade':
obj.fadeOut();
break;
case 'slide':
obj.slideUp();
break;
default:
obj.fadeOut();
}
}
}
}(jQuery));还有一个jquery-2.1.3.js , 自行在jQuery官方网站下载即可
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
