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 ...
随机推荐
- QT的QWidget和Delphi的TPanel很像,都是万能的基础控件
都只提供了最基本的功能,实际可以在上面随心所欲的创造新的控件.而自身也已经拥有基础的显示功能,而TCustomControl就不行. 比如,这样使用QWidget,直接就可以显示: void Main ...
- Trainning Guide的代码
今天无意间找到了训练指南的网上代码,都是刘汝佳写的,在这. 今天在做这题1400 - "Ray, Pass me the dishes!",我写的线段树的思路跟上次的Frequen ...
- P147、面试题26:复杂链表的复制
题目:请实现ComplexListNode* Clone(ComplexListNode* pHead),复制一个复杂链表.在复杂链表中,每个结点除了有一个m_pNext指针指向下一个结点外,还有一个 ...
- Consistent Hashing算法-搜索/负载均衡
在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法(Respons ...
- 分布式java应用
大型应用,通常会拆分为多个子系统来实现. 对Java来说,这些子系统可能部署在同一台机器的多个不同的JVM中,也可能部署在不同的机器上,但这些子系统又不是完全独立的,要相互通信来共同实现业 ...
- 【HDOJ】4343 Interval query
最大不相交集合的数量.思路是dp[i][j]表示已经有i个不相交集合下一个不相交集合的最右边界.离散化后,通过贪心解. /* 4343 */ #include <iostream> #in ...
- Pomelo服务器琐碎方法
1.获取客户端ip地址:session__session__.__socket__remoteAddress.ip 2.日志文件无法打印到文件,删除node_modules/pomelo/node_m ...
- 关于Azure存储账户中存储虚拟机VHD文件的注意事项
Joy Qiao from MSFT Thu, Mar 12 2015 3:16 PM 我们在使用Azure时经常都会在Azure存储账户中放一些文件,包括Azure虚机的VHD文件也都是放在存储 ...
- 【 D3.js 高级系列 — 1.0 】 文本的换行
在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...
- MEF技术
MEF 是一个使开发人员能够创建“插件式应用程序”的技术,这里的“插件”是指在应用程序部署后开发人员能够通过开发“插件”来扩展应用程序功能.但不同之处是使用MEF框架您在系统设计阶段不需要考虑在应用程 ...