`

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网页右侧浮动二维码返回顶部代码.zip

    "jQuery网页右侧浮动二维码返回顶部代码.zip"这个压缩包就提供了这样的功能实现,主要利用了jQuery库,具体包括以下几个关键知识点: 1. **jQuery库**:jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档...

    div css仿太平洋网页固定层返回顶部代码.zip

    在网页设计中,"div css仿太平洋网页固定层返回顶部代码"是一种常见的前端技术实现,用于创建具有专业外观和用户体验的网页。这个压缩包文件包含了实现这一效果的代码,主要涉及JavaScript(js)特效和CSS(层叠样式...

    wudics返回页面顶部代码

    这种方法结合了`onload`事件和`scroll`函数,可以在页面加载完成后动态显示“返回顶部”的按钮,并且在用户点击后平滑滚动回顶部。 **实现步骤:** 1. **在页面中加入按钮:** ```html 返回顶部 ``` 2. **编写...

    jQuery平滑返回顶部代码.zip

    这个"jQuery平滑返回顶部代码.zip"压缩包显然包含了实现这一功能的jQuery脚本和可能的相关资源。jQuery库是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发人员能更轻松地创建交互式Web...

    jQuery绿色QQ在线客服返回顶部代码.zip

    总结起来,“jQuery绿色QQ在线客服返回顶部代码”是网页交互设计的一个实用案例,它展示了如何使用jQuery和CSS实现动态效果和用户体验优化。通过理解并应用这些技术,开发者可以为网站增添更多互动性和吸引力,同时...

    简单实用jQuery返回顶部代码.zip

    这个压缩包“简单实用jQuery返回顶部代码.zip”提供了一个实现这一功能的jQuery代码示例。接下来,我们将详细探讨相关的HTML5、jQuery、前端开发以及CSS知识点。 **HTML5** HTML5是现代网页的标准标记语言,它增强...

    jquery返回顶部(直接把页面中js、css、标签、图片引入项目即可

    在网页设计中,"返回顶部"功能是一种常见的用户体验优化手段,它允许用户快速地将页面滚动到顶部,尤其是在浏览长内容页面时。本资源提供的"jquery返回顶部"方案,是利用jQuery这一流行的JavaScript库实现这一功能。...

    web-回到顶部

    在网页设计中,"回到顶部"功能是一种常见的用户体验优化手段,它允许用户快速将页面滚动条返回到页面的顶部,而无需手动滚动。这个功能在长页面或内容丰富的网站上尤其有用。本篇文章将深入探讨如何利用JavaScript...

    jquery做的返回顶部插件

    在网页设计中,用户体验往往是非常关键的一环,而“返回顶部”功能则是一个常见的提升用户体验的设计元素。"jQuery做的返回顶部插件"正如其标题所示,是一个基于JavaScript库jQuery实现的,旨在帮助用户轻松地回到...

    纯css3右悬浮返回顶部和其他效果

    【标题】"纯CSS3右悬浮返回顶部和其他效果"是一个技术主题,主要涉及CSS3的高级用法,尤其是如何利用CSS3实现页面上的一个常见功能——悬浮在右侧的“返回顶部”按钮。这个功能通常用于网页长滚动时,帮助用户快速...

    BackToTop “返回顶部” 页面组件

    "BackToTop”返回顶部页面组件是网页设计中常见的功能,它允许用户快速滚动到页面的顶部,提高用户体验。在本文中,我们将深入探讨这个组件的设计原理、实现方式以及相关技术。 首先,让我们理解“返回顶部”组件的...

    网站右侧客服带返回顶部.zip

    【标题】"网站右侧客服带返回顶部.zip"所涉及的知识点主要集中在网页设计与前端开发领域,特别是JavaScript特效的应用。这个项目实现了一个功能完善的在线客服系统,同时包含了页面滚动时出现的“返回顶部”按钮,这...

    纯js实现页面返回顶部的动画(超简单)

    4. 优雅降级:对于不支持JavaScript的浏览器,或者禁用了JavaScript的用户,应考虑提供一个备选方案,比如传统的“返回顶部”按钮。 总的来说,这篇文章介绍了一个非常基础但实用的JavaScript技能——如何使用纯...

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

    总的来说,"JS返回底部、返回顶部网页特效代码"是一个提升网页交互性的实用工具,它利用JavaScript和可能的Ajax技术,为用户提供便捷的页面导航,同时通过动画效果提升用户体验。在实际开发中,可以根据自己的需求对...

    jQuery带返回顶部qq和二维码代码.zip

    通过上述步骤,我们可以利用jQuery轻松实现网页返回顶部功能和添加QQ二维码。这些实用的交互元素可以显著提升网站的用户体验,让用户更容易地访问和联系到你。记得在实际项目中根据自己的需求进行适当的调整和优化。

    回到顶部(仿淘宝)Js代码

    这种功能在内容丰富的长页面中尤其有用,比如淘宝这样的电子商务网站,用户浏览时可能需要频繁地返回顶部查看导航或搜索框。 JavaScript(Js)是实现这一功能的主要编程语言。JavaScript是一种广泛应用于客户端Web...

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

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

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

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

    shopex返回顶部插件挂件半透明矩形简洁

    1. **返回顶部功能**:返回顶部按钮是一种常见的网页交互元素,尤其在内容丰富的长页面中,它可以帮助用户节省时间,避免频繁滚动。点击该按钮,页面会瞬间回到顶部,提升浏览效率。 2. **ShopEx插件机制**:ShopEx...

    vue返回顶部插件

    在开发Web应用时,用户在滚动页面后往往需要一个便捷的方式快速返回页面顶部,这就催生了“返回顶部”插件的需求。Vue返回顶部插件正是为了解决这一问题而设计的,它能够自定义样式和行为,提升用户体验。 这个特定...

Global site tag (gtag.js) - Google Analytics