纯文字版返回顶端的js代码
<script language="javascript">
var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer() {
var y = goto_top_type == 1 ? document.documentElement.scrollTop
: document.body.scrollTop;
var moveby = 15;
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
} else {
document.body.scrollTop = y;
}
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top() {
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
} else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
} else {
goto_top_type = 0;
}
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
</script>
<a href="javascript:void(0)" onclick="goto_top()">【返回顶部】</a>
相关推荐
-
页面回到顶部的三种实现(锚标记,js)
本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.jb51.net/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.jb51.net/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能. 一.使用锚标记返回页面顶部 使用
-
js滚动条回到顶部的代码
虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex
-
基于jquery的回到页面顶部按钮
css代码: 复制代码 代码如下: .scroll-up { background: #dcdcdc url('up.png') no-repeat center center; width:48px !important; /*for ff and other standard browser*/ height:48px !important; _width: 58px; /*for IE6 nonstandard box model*/ _height: 58px; position: fi
-
JS实现一键回顶功能示例代码
1.基础准备: scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offset 指的是滚动条相对于其顶部的偏移. 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移. 语法 $(selector).scrollTop(offset) 2. toggleClass() 对设置或移除被选元素的一个或多个类进行切换. 例如对设置和移除所有 <p> 元素的 "main" 类进行切换: 复制代码 代码如下: $("button
-
一个简单的弹性返回顶部JS代码实现介绍
昨天做了一个这样的功能,贴出来参考. HTML/JS/CSS代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
javascript返回顶部效果(自写代码)
现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &
-
返回页面顶部top按钮通过锚点实现(自写)
实现了我的小跳槽以后,从8月7号入职了现在的这家公司,我好像是加入了救火队的行列,还没有开始开发新的模块,只是一直在实现已经上线模块中的新需求,有时候也真想问问,某些用户的脑子是不是进水了,提出来的需求只想让人大笑三声...幸好项目组做需求的姐姐工作经验十分丰富,能够很好地和用户协调,让我们这些开发人员也没那么辛苦~ 用户在使用系统时,会有很多表单的操作,然而很多表单都是裹脚布啊,长啊长~ 所以就需要一个返回页面顶部的top按钮啦~ 虽然说网上的方法有很多种,但是未免过于繁琐.左一个判断又一个定
-
js控制的回到页面顶端goTop的代码实现
有没有见过很多在页面的右下角有个[回到顶端]的悬浮东东,并且在开始时没有,一移动滚动条就出现,回到了顶端又消失的样子. 像: 控制的js代码如下: 复制代码 代码如下: function goTop(){ var _btn = document.getElementById("goTop"); if (document.documentElement && document.documentElement.scrollTop) { var _con = document
-
纯文字版返回顶端的js代码
复制代码 代码如下: <script language="javascript">var goto_top_type = -1;var goto_top_itv = 0;function goto_top_timer() { var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop; var moveby = 15; y -= Math.ceil(y
-
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
在网站开发中,经常会简单使用js代码来判断字符串中有多少汉字的功能.今天小编抽时间给大家分享实现代码.废话不多说了,直接给大家贴代码了. $("form").submit(function () { var content = editor.getContentTxt(); var sum = 0; re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则 if (content) { if (re.test(content)) //使用正则判断是否存在中文 { if
-
JS本地刷新返回上一页代码
长话短说,今天介绍实现此功能的一个方法,需要了解的朋友可以参考下: 一.JS 重载页面,本地刷新,返回上一页 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:location.reload()">重载页面,本地刷新</a> <a href="javascript:history.go(-1);location
-
纯JS代码实现气泡效果
就不给大家多文字说明了.给大家梳理下关键步骤. 关键步骤: 1.引入js文件 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src='js/jquery.thoughtBubble.js'></script> 2.在需要使用气泡效果的地方 <div i
-
JS实现的文字与图片定时切换效果代码
本文实例讲述了JS实现的文字与图片定时切换效果代码.分享给大家供大家参考.具体如下: 这是近来门户们都喜欢用的特效,左侧是一个大图片,右侧是对应文字,鼠标移动时,对应行的文字会变化,图片也相应的切换,如果没有鼠标动作时,它会自己播放,播放时间可调整,个人感觉挺不错的导航效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-txt-pic-time-cha-tab-codes/ 具体代码如下: <head> <meta http-e
-
js代码实现无缝滚动(文字和图片)
一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s
-
js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes
-
纯js代码实现简单计算器
本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title> new document </title> <script type="text/javascript"> function count(){ var txt1 = parseInt( document.getElementById(
-
js纯数字逐一停止显示效果的实现代码
js纯数字逐一停止显示效果的实现代码 function showScore($ele, num, secand, pause){ //second 按照秒数,动画运行多少秒 if (!secand) { secand = 2;} if (!pause) { pause = 20;} var len = String(num).length; var temnum, times = 0 , stepTimes, max ; var numArr = String(num).split(""
随机推荐
- SeaJS入门教程系列之完整示例(三)
- java 异常详解及应用实例
- Python实现简单拆分PDF文件的方法
- php 格式化数字的时候注意数字的范围
- PHP函数引用返回的实例详解
- javascript URL编码和解码使用说明
- php实现微信公众号无限群发
- 使用C# 判断给定大数是否为质数的详解
- php实现面包屑导航例子分享
- VBS教程:VBscript属性-Pattern 属性
- C# 泛型数组学习小结
- Bootstrap面板使用方法
- 在网站上应该用的30个jQuery插件整理
- js 采用delete实现继承示例代码
- php简单截取字符串代码示例
- Ubuntu下安装Chrome的方法分享
- 自动发帖机的斗争过程防止垃圾评论的几个方法总结
- Android使用phonegap从相册里面获取照片(代码分享)
- shiro之记住登录信息
- spring使用ehcache实现页面缓存示例