您的位置：首页 > Web前端 > JQuery

jQuery 实现小功能之回到顶部

2015-04-11 15:11 471 查看

使用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<
d62d
/span>,
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官方网站下载即可

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript jquery插件回到顶部

相关文章推荐

新的分享

章节导航