手机端网页返回顶部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&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;

mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body");

mainobj.$control=$('

").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地址:https://github.com/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&plus;&plus;容器类

C++容器类 C++中的容器类包括“顺序存储结构”和“关联存储结构”,前者包括vector,list,deque等:后者包括set,map,multiset,multimap等. 若需要存储的元素数在 ...

jquery 触屏滑动&plus;定时滚动

jquery倒计时过几秒页面跳转 js倒计时

//银行认证成功跳转 var time=setInterval (showTime, 1000); var second=5; function showTime() { if(second==0) ...

sqlmap连接Mysql实现getshell&lpar;原创&rpar;

前言 昨天群友发了一知乎的帖子..才发现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&colon; An exception occurred while executing

安装owncloud出现:Error while trying to create admin user: An exception occurred while executing 1.安装ownc ...

使用AOP AspectJ 定义&commat;Before&comma;&commat;After &comma;&commat;Aroud后 执行两次

背景 转眼之间,发现博客已经将近半年没更新了,甚是惭愧.话不多说,正如标题所言,最近在使用AspectJ的时候,发现拦截器(AOP切面)执行了两次了.我们知道,AspectJ是AOP的一种解决方案,本 ...

python学习第39天

# 数据操作 # 增 # 删 # 改 # 查 # 单表查询 # 多表查询

jquery插件artTxtCount输入字数限制&comma;并提示剩余字数

工作中用到,需要批量处理下