PC返回顶部浮动按钮
要添加的css:
<style>
.up{width:54px;height:54px;background:url(/Images/topback.gif) no-repeat 0 0;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}.up:hover{filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
</style>
js代码:
var scrolltotop={
setting:{
startline:100, //起始行
scrollto:0, //滚动到指定位置
scrollduration:400, //滚动过渡时间
fadeduration:[500,100] //淡出淡现消失
},
controlHTML:'<div class="up"></div>', //返回顶部按钮
controlattrs:{offsetx:30,offsety:80},//返回按钮固定位置
anchorkeyword:"#top",
state:{
isvisible:false,
shouldvisible:false
},scrollup:function(){
if(!this.cssfixedsupport){
this.$control.css({opacity:0});
}
var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);
if(typeof dest=="string"&&jQuery("#"+dest).length==1){
dest=jQuery("#"+dest).offset().top;
}else{
dest=0;
}
this.$body.animate({scrollTop:dest},this.setting.scrollduration);
},keepfixed:function(){
var $window=jQuery(window);
var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx;
var controly=$window.scrollTop()+$window.height()-this.$control.height()-this.controlattrs.offsety;
this.$control.css({left:controlx+"px",top:controly+"px"});
},togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop();
if(!this.cssfixedsupport){
this.keepfixed();
}
this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false;
if(this.state.shouldvisible&&!this.state.isvisible){
this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);
this.state.isvisible=true;
}else{
if(this.state.shouldvisible==false&&this.state.isvisible){
this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);
this.state.isvisible=false;
}
}
},init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop;
var iebrws=document.all;
mainobj.cssfixedsupport=!iebrws||iebrws&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;
mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body");
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+"</div>").css({position:mainobj.cssfixedsupport?"fixed":"absolute",bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"返回顶部"}).click(function(){mainobj.scrollup();return false;}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&mainobj.$control.text()!=""){mainobj.$control.css({width:mainobj.$control.width()});}mainobj.togglecontrol();
$('a[href="'+mainobj.anchorkeyword+'"]').click(function(){mainobj.scrollup();return false;});
$(window).bind("scroll resize",function(e){mainobj.togglecontrol();});
});
}
};
scrolltotop.init();
备注:需要引用jquery
PC返回顶部浮动按钮的更多相关文章
- 【Android】ListView监听上下滑动(判断是否显示返回顶部按钮
设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮 package com.zihao.activity; import java. ...
- UWP 返回顶部按钮
返回顶部的按钮,like this 当用户下滑了一定的距离之后,通常是快滑倒底部的时候,出现返回顶部按钮,当用户向上快滑,滑到顶部的时候,返回顶部按钮自动消失. 在UWP中,用来滚动内容的控件是Scr ...
- jquery返回顶部,支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
- 渲染优化 之fixed与返回顶部 以及开启GPU Hack
fixed元素,常见网站右侧出现一个返回顶部的按钮,滚动的时候,会发现返回顶部这个区域在不停的进行重绘,而返回顶部是position:fixed定位的.这也解释了为什么fixed定位是最耗性能的属性之 ...
- jQuery中页面返回顶部的方法总结
当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...
- web的几种返回顶部
回到顶部backtoTop 滚动回到顶部 jquery/js效果还不错!支持现代浏览器包括 ie6.position: absolute;和fixed.两种方法! 一,jQuery方法的backtoT ...
- js小效果:返回顶部 scrollTop 。 滚屏:animate
返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...
随机推荐
- js 实现list类
js中没有list类,可以使用Array来实现list类 (function(win) { var ArrayList = function() { this.datas = []; }; var p ...
- 双机高可用、负载均衡、MySQL(读写分离、主从自动切换)架构设计
前几天网友来信说帮忙实现这样一个架构:只有两台机器,需要实现其中一台死机之后另一台能接管这台机器的服务,并且在两台机器正常服务时,两台机器都能用上.于是设计了如下的架构. 架构简介 此架构主要是由ke ...
- C#.Net 如何动态加载与卸载程序集(.dll或者.exe)0-------通过应用程序域AppDomain加载和卸载程序集
本博客中以“C#.Net 如何动态加载与卸载程序集(.dll或者.exe)”开头的都是引用莫问奴归处 微软装配车的大门似乎只为货物装载敞开大门,却将卸载工人拒之门外.车门的钥匙只有一把,若要获得还需要 ...
- 获取html上元素的真正坐标
使用HTML元素的style.left,style.top,style.width,style.height以及width,height属性,都不能获得元素的真正位置与大小,这些属性取出来的都是原来的 ...
- Codeforces 380A - Sereja and Prefixes
原题地址:http://codeforces.com/problemset/problem/380/A 让期末考试整的好久没有写题, 放假之后由于生病也没怎么做,新年的第一场CF也不是那么在状态,只过 ...
- Jquery动画第一部分
效果图: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.asp ...
- bzoj1059: [ZJOI2007]矩阵游戏
二分图匹配. 补充,感觉之前说的不够详细,如果有完美匹配的话,每行都有一个对应的列,那么换来换去以后,对角线就全黑了... #include<cstdio> #include<alg ...
- sencha touch2 动画问题
最近在review一个项目的代码, 发现返回操作比较乱,很多"从哪里来,到哪里去的操作"被写的一塌糊涂; 按照ios系统的进场出场动画(人家的体验还是很好的,必须借鉴)为标准,使用 ...
- Gen_event行为分析和实践
1.简介 Gen_event实现了通用事件处理,通过其提供的标准接口方法以及回调函数,在OTP里面的事件处理模块是由一块通用的事件管理器和任意数量的事件处理器,并且这些事件处理器可以动态的添加和删除. ...
- HDU 5289 Assignment
题意:求一段长度为n的序列里有多少个子区间内的最大值减最小值小于k. 解法:RMQ+尺取法或单调队列.RMQ可以用st或者线段树,尺取法以前貌似YY出来过……只是不知道是这个东西…… 设两个标记l和r ...