手机端网页返回顶部js代码
手机往下滑动即可显示返回顶部按钮!
var scrolltotop={
setting:{
startline:100, //起始行
scrollto:0, //滚动到指定位置
scrollduration:400, //滚动过渡时间
fadeduration:[500,100] //淡出淡现消失
},
controlHTML:'', //返回顶部按钮
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&&patMode=="CSS1Compat"&&window.XMLHttpRequest;
mainobj.$body=(window.opera)?(patMode=="CSS1Compat"?$("html"):$("body")):$("html,body");
mainobj.$control=$('
'+mainobj.controlHTML+"").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();
弹性返回顶部JS代码
弹性返回顶部JS代码 弹性返回顶部JS代码点击下载
70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用vConsole调试 移动端调试工具vconsole安装Git地址:/WechatFE ...
js网页返回顶部和楼层跳跃的实现原理
这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.) 说楼层跳跃前,先温习下,一般网页在高度较大时, ...
javascript实现网页返回顶部功能
在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...
网页返回顶部之animate方法
点击返回顶部按钮,页面滑动形式回到顶部! HTML代码:
回到
顶部 CSS代码: #ctop{ ...
手机端网页使用html5地理定位获取位置失败的解决办法
网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...
gotoTop返回顶部 JS
方法: 1.首先在body添加一个标签,在一个页面添加,其它页面也会生效.
2.然后在页脚添加一个链接 < ...
ECSHOP返回顶部的代码 纯CSS超简单
在themes/模板文件夹/library/page_footer.lbi 文件的最末尾加上下面的一段代码
随机推荐
【转】C++容器类
C++容器类 C++中的容器类包括“顺序存储结构”和“关联存储结构”,前者包括vector,list,deque等:后者包括set,map,multiset,multimap等. 若需要存储的元素数在 ...
jquery 触屏滑动+定时滚动
jquery倒计时过几秒页面跳转 js倒计时
//银行认证成功跳转 var time=setInterval (showTime, 1000); var second=5; function showTime() { if(second==0) ...
sqlmap连接Mysql实现getshell(原创)
前言 昨天群友发了一知乎的帖子..才发现sqlmap玩了那么久有些玩意我居然没玩过...然后看着群友玩= =今天也想试试. 0x01 首先得知道这个玩意,sqlmap -help,不说大家也懂搜嘎. ...
Foundation框架中日期的操作
#import int main(int argc, const char * argv[]) { NSDate *date1=[NSD ...
Android开发技巧——PagerAdapter的再次简单封装
这次再对内容为View的ViewPager的适配器PagerAdapter进行简单的封装,支持List数据和SparseArray的数据,带更新视图功能. 首先,先贴上最上面的抽象类代码: /* * ...
安装owncloud出现：Error while trying to create admin user: An exception occurred while executing
安装owncloud出现:Error while trying to create admin user: An exception occurred while executing 1.安装ownc ...
使用AOP AspectJ 定义@Before,@After ,@Aroud后 执行两次
背景 转眼之间,发现博客已经将近半年没更新了,甚是惭愧.话不多说,正如标题所言,最近在使用AspectJ的时候,发现拦截器(AOP切面)执行了两次了.我们知道,AspectJ是AOP的一种解决方案,本 ...
python学习第39天
# 数据操作 # 增 # 删 # 改 # 查 # 单表查询 # 多表查询
jquery插件artTxtCount输入字数限制,并提示剩余字数
工作中用到,需要批量处理下
