`

Web页面返回顶部代码

 
阅读更多

篇幅过长,总是不利于操作,返回顶部能更友好的操作。

1.html代码

<div style="display:none;" class="back-to" id="toolBackTop">
     <a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">返回顶部</a>
</div>

 2.css代码

.back-to {
	bottom: 35px;
	overflow: hidden;
	position: fixed;
	right: 10px;
	width: 110px;
	z-index: 999;
}
.back-to.back-top {
	background: url("back-top.png") no-repeat scroll 0 0 transparent;
	display: block;
	float: right;
	height: 50px;
	margin-left: 10px;
	outline: 0 none;
	text-indent: -9999em;
	width: 50px;
}
.back-to.back-top:hover {
	background-position: -50px 0
}
  

 3.jquery代码

$(document).ready(function () {
	var bt = $('#toolBackTop');
	var sw = $(document.body)[0].clientWidth;
 
	var limitsw = (sw - 880) / 2 - 80;
	if (limitsw > 0){
		limitsw = parseInt(limitsw);
		bt.css("right",limitsw);
	}
 
	$(window).scroll(function() {
		var st = $(window).scrollTop();
		if(st > 30){
			bt.show();
		}else{
			bt.hide();
		}
	});
})
 

 4.图片

back-top

分享到:
评论

相关推荐

    jQuery 缓冲返回网页顶部JS代码

    摘要:脚本资源,jQuery,返回顶部,JS缓冲效果 JS-BACK-TOP,基于jquery的带缓冲效果返回网页顶部的代码,还有点淡入淡出的效果,类似的代码已有很多了,今天再发一个,觉得这功能挺实用,淘宝有这效果。

    JS示例 放大镜&图片懒加载&返回顶部&瀑布流&手风琴

    技术关键词: 放大镜、图片懒加载、返回顶部、瀑布流、手风琴 内容关键词: 前端组件、交互效果、Web开发、JavaScript代码示例 用途: 帮助前端开发人员学习和实现放大镜、图片懒加载、返回顶部、瀑布流和手风琴等...

    仿新浪微博返回顶部的jquery实现代码

    一、引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮。 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮;人人网的返回顶部直接在底部的工具条上;新浪...

    右侧微信返回顶部和二维码提示

    右侧悬浮二维码提示和返回顶部代码,非常适用网页设计代码。当滚动条超出浏览器固定值范围显示返回顶部图标,非常不错的啊。 效果详情可查看http://www.xwcms.net/js/tsk-fdc-dcc/61003.html

    JS返回底部、返回顶部网页特效代码

    摘要:脚本资源,Ajax/JavaScript,返回底部,返回顶部 动画效果的返回底部、返回顶部效果,看上去挺个性的效果。与以前的回到顶部不一样的哦。

    在线人工客服代码.rar

    jQuery侧边悬浮的客服菜单、jQuery仿美橙官网右侧悬浮固定在线客服代码、jquery win8风格的页面返回顶部按钮带二维码和qq在线客服、jquery网页右侧固定层QQ在线客服代码等一共10套源代码。

    基于Vue的校园生活管理系统Web端项目源码+项目说明(课程设计项目).zip

    基于Vue的校园生活管理系统Web端项目源码+项目说明(课程设计项目).zip 【功能实现】 -登录 / 注销 -权限验证 页面权限 ... 返回顶部 拖拽Dialog 拖拽Select 拖拽看板 更多请看详细项目说明!!

    《JavaScript实例精通》[源代码]

    6_6.htm 在Web页面中控制其元素的选择状态。 第7章(\7) 示例描述:JavaScript的鼠标事件和键盘事件。 7_1.htm 按钮的鼠标单击事件。 7_2.htm 用鼠标点亮文本。 7_3.htm 渐显图片。 7_4.htm 跟随鼠标的...

    微信小程序-微信小程序-创客+

    向下滚动时自动出现返回顶部按钮 标签悬浮于图片 数据接口: 使用本地数据接口 目录结构: images — 存放项目图片文件 pages — 存放项目页面渲染相关文件 utils — 存放项目格式化时间功能代码 开发环境: 微信...

    微信小程序实现页面浮动导航

    做复杂的小程序就与web页面的区别原来越小了,一些web页面的功能会被要求添加到微信小程序页面中。 二、功能 页面在滑动的时候顶部页面导航跟随滑动,当点击导航中的任意一项时返回页面顶部。 三、实现 wxml代码: ...

    3.ASP.NET 2.0 入门经典(第4版) [压缩包1/10]

    内容简介回到顶部↑ASP.NET具有开发效率高、平台无关性、安全性强等方面的优势,广泛用于创建动态Web站点和基于Web的分布式应用程序,是广大Windows程序员开发Web应用程序的有效工具。ASP.NET 2.0在Web应用程序...

    jQuery锚点动画跳转顶部效果

    jquery锚点带动画跳转返回顶部特效,可定位到网页的相应模块,多种方式回到网页顶部效果,第一种方式是最初打开页面的时候,点击最上边的导航按钮,可进入本页面相应的区域。第二种方式是,拖动滚动条之后,网页右侧...

    Colorful 明月浩空 V2.7

    16、个性化返回顶部动画(彩蛋:如果快速移动鼠标,老鼠被唤出不会立刻隐藏,全站任意位置快速双击鼠标左键返回顶部) 17、一堆短代码 18、全站图片灯箱 19、模板后台支持模板设置 20、评论支持IP地址显示(纯真...

    图库新版jQuery焦点图 JS代码

    document.writeln ('&lt;dd&gt;07月12日 修复搜索、导航和返回顶部BUG&lt;/dd&gt;'); document.writeln ('&lt;dd&gt;06月26日 改进网页背景频道预览功能&lt;/dd&gt;'); //document.writeln ('&lt;dd&gt;06月23日 改进返回顶部功能&lt;/dd&gt;'); //...

    EXTJS总结.txt

    复制代码 代码如下: var el = Ext.get('elId'); if (el.is('p.myCls')) { // 条件成立 } 18.findParent 定位于此节点,以此节点为起点,向外围搜索外层的父节点,搜索条件必须符合并匹配传入的简易选择符。 ...

    Web-Design-BootStrapHTML:天气可视化HTML

    导航栏包括: 每页上都有一个主页按钮,它将使您返回到摘要登录页面地块下拉菜单,其中包含指向我的4个天气摘要的链接指向该页面的“比较”链接显示了一个页面,其中包含所有4种天气摘要的网格形式数据链接可带您到...

    API之网络函数---整理网络函数及功能

    EndPage 用这个函数完成一个页面的打印,并准备设备场景,以便打印下一个页 EndPagePrinter 指定一个页在打印作业中的结尾 EnumForms 枚举一台打印机可用的表单 EnumJobs 枚举打印队列中的作业 EnumMonitors ...

    html入门到放弃笔记

    WEB页面,简称WEB页(网页),就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以...

    jquery.HooRay 插件 jquery常用网页特效的封装

     隔行换色、无缝滚动、返回顶部、外链弹窗、手风琴、Tabs切换、锚点连接、多选按钮、单选按钮、控制多选按钮选择数量、下拉列表、图片缩放、高亮显示、图片展示、输入框文字提示等,其中大多数功能大家经常会用到,...

Global site tag (gtag.js) - Google Analytics