`
tjuking
  • 浏览: 194890 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript返回顶部代码实现

阅读更多

 

返回顶部逻辑很简单,功能点分为:

  • 页面第一屏内不展示返回顶部的图标,超过第一屏时展示图标;
  • 点击返回顶部图标时页面流畅地返回顶部。

HTML文件部分:

<!DOCTYPE html>
<html>
	<head>
		<title>返回顶部</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<p>向下拖动滚动条(进入第二屏),右下角会出现“返回顶部”图标</p>
		<img src="images/totop.png" id="toTop"/>
		<script style="text/javascript" src="js/lee_top.js"></script>
	</body>
</html>

 

CSS文件部分:

body{
	height:4000px;
}
#toTop{
	position:fixed;
	right:30px;
	bottom:40px;
	cursor:pointer;
	display:none;
}

 

PS:因为CSS部分用到了"fixed",这个例子没有做IE6的兼容性处理(我相信大多数前端工程师都不喜欢IE6,),不过如果需要探讨此例的IE6兼容性,可以私信探讨^_^ 或者查看最新代码地址:https://github.com/tjuking/lee-goToTop

 

JS文件部分:

(function(){
	var scrollEle = clientEle = document.documentElement,
		toTopBtn = document.getElementById("toTop"),
		compatMode = document.compatMode,
		isChrome = window.navigator.userAgent.indexOf("Chrome") === -1 ? false : true;
	//不同渲染模式以及Chrome的预处理
	if(compatMode === "BackCompat" || isChrome){
		scrollEle = document.body;
	}
	if(compatMode === "BackCompat"){
		clientEle = document.body;
	}
	//返回顶部按钮的点击响应(注册函数),时间间隔和高度缩减率可以调节
	toTopBtn.onclick = function(){
		var moveInterval = setInterval(moveScroll, 10);
		function moveScroll(){
			setScrollTop(getScrollTop() / 1.2);
			if(getScrollTop() === 0){
				clearInterval(moveInterval);
			}
		}
	}
	//滚动时判断是否显示返回顶部按钮(注册函数)
	window.onscroll = function(){
		var display = toTopBtn.style.display;
		if(getScrollTop() > getClientHeight()){
			if(display === "none" || display === ""){
				toTopBtn.style.display = "block";
			}
		}else{
			if(display === "block" || display === ""){
				toTopBtn.style.display = "none";
			}
		}
	}
	//获取和设置scrollTop
	function getScrollTop(){
		return scrollEle.scrollTop;
	}
	function setScrollTop(value){
		scrollEle.scrollTop = value;
	}
	//获取当前网页的展示高度(第一屏高度),此处Chrome正常
	function getClientHeight(){
		return clientEle.clientHeight;
	}
})();

 

如果返回顶部用jQuery实现需要考虑的东西就很少了,不过原生的Javascript能帮助我们更好的学习这门语言以及了解各浏览器的不同。

 

当然除了以上代码还需要去网上找一个漂亮的图标。

 

 

 

 

 

3
1
分享到:
评论
2 楼 tjuking 2012-12-06  
kingcs 写道
例子很不错,感谢分享。

谢谢~
1 楼 kingcs 2012-12-06  
例子很不错,感谢分享。

相关推荐

    【JavaScript源代码】JavaScript实现返回顶部按钮案例.docx

    JavaScript 实现返回顶部按钮是一种常见的网页交互功能,它允许用户快速返回页面的顶部,提高用户体验。下面我们将详细探讨如何使用JavaScript来实现这个功能。 首先,我们需要创建返回顶部按钮的HTML结构,通常是...

    JS返回顶部代码

    在这个“JS返回顶部代码”中,我们将探讨如何利用JavaScript实现一个简单的功能,即当用户在浏览网页时,点击按钮能够使页面瞬间回到顶部。 返回顶部的功能在许多网站上都能看到,它通常以一个小图标或者文字形式...

    返回顶部JS代码

    10. **JS代码**:`js`文件通常会包含实现返回顶部功能的JavaScript代码,包括事件监听、DOM操作和动画逻辑。代码可能如下: ```javascript var backToTop = document.querySelector('.back-to-top'); window....

    弹性返回顶部代码,兼容各大浏览器

    综上所述,创建一个兼容各大浏览器的弹性返回顶部代码,主要涉及HTML结构、CSS样式和JavaScript交互。通过合理的布局、动画效果和兼容性处理,我们可以为用户提供一个既实用又具有良好体验的返回顶部功能。记得在...

    滑动返回顶部代码

    本文将详细解析"滑动返回顶部代码"的实现原理、设计要点以及弹性动画效果的添加。 首先,我们需要理解这个功能的核心:监听用户的滚动事件,当用户滚动到页面底部时,显示返回顶部的按钮;当用户点击该按钮时,让...

    jQuery右侧边栏二维码QQ客服返回顶部代码

    在这个特定的项目中,“jQuery右侧边栏二维码QQ客服返回顶部代码”是一个实现了一些常见网站功能的代码片段,包括: 1. **jQuery库的引入**:首先,你需要在网页中引入jQuery库,这通常是通过在HTML文档的`&lt;head&gt;`...

    缓冲效果返回顶部源代码

    在压缩包中的"缓冲返回顶部源代码.html"文件中,应该包含了一个具体的HTML结构,以及相关的JavaScript代码实现上述功能。你可以通过查看和分析这个源代码,了解具体的实现细节,例如CSS样式如何定义返回顶部按钮的...

    jquery实现返回顶部源代码

    这段代码首先在用户滚动页面超过100像素时显示“返回顶部”按钮,当用户滚动回顶部附近则隐藏按钮。点击按钮时,会触发一个动画效果,使页面在800毫秒内平滑滚动至顶部。 此源代码简洁而有效,适用于大多数网站。...

    jquery返回顶部代码

    下面是一个简单的jQuery返回顶部的实现代码示例: ```html &lt;!DOCTYPE html&gt; 返回顶部示例 #back-to-top { position: fixed; bottom: 20px; right: 30px; width: 50px; height: 50px; background-...

    jQuery可变透明度返回顶部代码

    "jQuery可变透明度返回顶部代码"就是一个实现此类功能的JavaScript插件,它利用jQuery库的特性,通过调整按钮的透明度来增加用户体验。 该代码的核心思想是:当用户滚动到页面的第二屏时,返回顶部按钮才显现,并...

    jQuery右端悬浮带返回顶部代码

    以上就是实现jQuery右端悬浮带返回顶部代码的基本步骤和知识点。这个功能不仅可以增强网站的可用性,还能提升整体的视觉效果。通过理解并实践这些代码,开发者可以进一步掌握jQuery的用法,并将其应用到其他网页交互...

    最简洁的返回顶部代码

    接下来,我们编写JavaScript代码(在`js/main.js`文件中),这段代码会在用户点击按钮时执行返回顶部的动作: ```javascript document.getElementById('back-to-top').addEventListener('click', function() { ...

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

    在"jQuery绿色QQ在线客服返回顶部代码"中,`jQuery绿色QQ在线客服返回顶部代码`可能是实现这些功能的源代码文件,如JavaScript脚本和CSS样式表。文件"说明.htm"可能包含了具体的实现细节和使用说明,帮助开发者理解...

    Metro扁平风格网页右侧返回顶部代码

    在这个名为"Metro扁平风格网页右侧返回顶部代码"的项目中,我们可以推测包含以下关键知识点: 1. **HTML 结构**: - `index.html` 文件是网页的基础结构,包含了HTML标记语言,定义了网页的各个部分,如头部(head...

    seajs jquery框架实现可爱的卡通人物动画返回顶部代码

    在本文中,我们将深入探讨如何使用SeaJS和jQuery框架来实现一个可爱的卡通人物动画返回顶部的功能。这个功能在网页设计中十分常见,它为用户提供了一种便捷的方式,只需点击一个可爱的动画图标,页面就能轻松滚动回...

    Jquery返回顶部代码兼容各种浏览器

    接下来,我们使用jQuery编写JavaScript代码来实现返回顶部的功能: ```javascript $(document).ready(function() { // 当滚动条距离顶部超过100px时显示返回顶部按钮 $(window).scroll(function() { if ($(this)...

    jQuery平滑返回顶部代码.zip

    本资源“jQuery平滑返回顶部代码.zip”提供了一种实现这一功能的方法,利用了广泛使用的JavaScript库jQuery。接下来,我们将深入探讨jQuery平滑返回顶部代码的工作原理、实现方式以及如何在实际项目中应用。 首先,...

    网页返回顶部和返回底部代码

    一、返回顶部的实现 1. HTML 结构: 首先,我们需要在页面的底部添加一个“返回顶部”的按钮元素。通常我们将其放置在`&lt;body&gt;`标签的末尾,以便始终在页面底部可见。 ```html 返回顶部 ``` 2. CSS 样式: 为了使...

    【JavaScript源代码】JavaScript实现返回顶部按钮.docx

    ### JavaScript 实现返回顶部按钮知识点解析 #### 一、背景介绍 在现代Web开发中,随着网站内容的丰富,页面往往变得越来越长。为了提供更好的用户体验,很多网站都会添加一个“返回顶部”的功能,使用户可以快速...

Global site tag (gtag.js) - Google Analytics