【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多。当内容堆积影响了用户体验,就需考虑如何提升用户体验。在这一系列的改动中,“回到顶部”的功能成为了一个经典。
1.页面布局
(1) 我们先简单的搭建一个长度为1200px的页面,保证视口的高度足够。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport" />
<title>Back to top</title>
<style type="text/css">
#content { height: 1200px;}
.text_center { text-align: center;}
</style>
</head>
<body>
<div id="content">
<div class="text_center">往下拉哟</div><br />
<div class="text_center">↓</div><br />
<div class="text_center">↓</div><br />
<div class="text_center">↓</div><br />
<div class="text_center">↓</div><br />
<div class="text_center">↓</div>
</div>
</body>
</html>
(2) 然后我们准备一张图片作为返回顶部的按钮:
(3) 接着,我们把按钮放到网页上去:
HTML代码:
<body>
...
<a id="btnTop" class="btnTop" href="javascript:;" title="Back to top">
<img src="img/o_to_Top.png" class="imageTop">
</a>
</body>
CSS代码:
.btnTop { position: fixed; right: 2%; bottom: 2%; cursor: pointer; opacity: .7; z-index:; }
.btnTop:hover { opacity:;}
.imageTop { height: 72px; height: 72px;}
现在的显示效果:
2.添加JS实现效果
原理:通过控制当前视口顶端的数值来实现
效果:返回顶部按钮默认不显示,当向下滑动到一定距离时显示。点击按钮后,当前页面由快到慢地返回页面顶部。
实现:
我们先让返回页面按钮默认不显示:
<a id="btnTop" style="display:none;" ...
然后,我们新建JavaScript文件并引用,具体功能实现代码如下,应该备注的比较详细:
window.onload = function(){
var btnTop = document.getElementById("btnTop");
var timer = null; window.onscroll = function(){
var backTop = getScrollTop();
if(backTop >= 20){ //当前视口顶端大于等于20时,显示返回顶部的按钮
btnTop.style.display = "block";
}else {
btnTop.style.display = "none";
}
}; btnTop.onclick = function(){
//定时执行
timer = setInterval(function(){
var backTop = getScrollTop();
var speedTop = backTop / 10;
//修改当前视口的数值,产生向上活动的效果
setScrollTop(backTop - speedTop);
if(backTop == 0){
//结束函数执行
clearInterval(timer);
}
},30);
};
//获取当前视口的顶端数值
var getScrollTop = function(){
var sTop ;
if (document.compatMode == "BackCompat")
{
sTop = document.body.scrollTop;
}
else
{
//document.compatMode == \"CSS1Compat\"
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
return sTop;
};
//设置当前视口的顶端数值
var setScrollTop = function(top){ if (document.compatMode == "BackCompat")
{
document.body.scrollTop = top;
}
else
{
if(document.documentElement.scrollTop == 0){
document.body.scrollTop = top;
}else{
document.documentElement.scrollTop = top;
}
}
}
};
现在的效果如下:
效果展示:http://yexiaochao.github.io/demo/page4top.html
【JavaScript Demo】回到顶部功能实现的更多相关文章
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- jQuerry点击按钮回到顶部功能
简单实现点击按钮回到顶部功能
- jquery javascript 回到顶部功能
今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...
- JavaScript实现回到顶部
HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...
- web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
- jQuery实现页面回到顶部功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
随机推荐
- C#判断字符串是否是数字
/// <summary> /// 判断字符串是否是数字 /// </summary> public static bool IsNumber(string s) { if ( ...
- 初探asp.net异步编程之await
终于毕业了,也顺利进入一家期望的旅游互联网公司.27号入职.放肆了一个多月没写代码,好方啊. 另外一下观点均主要针对于await. 请先看这段话,来自async in C# 5.0. 接下来几个月的 ...
- java函数
函数的封装没有定规,只要遵循语法,函数如何封装按照需求来做 函数四要素:函数名,输入,加工,输出(返回). 一.函数调用 1.函数名(变量列表); 没有返回值. 2.数据类型 变量名=函数名(变量列表 ...
- php中return的用法实例分析
本文实例讲述了php中return的用法.分享给大家供大家参考.具体分析如下: 首先,它的意思就是返回;return()是语言结构而不是函数,仅在参数包含表达式时才需要用括号将其括起来.当返回一个变量 ...
- TensorFlow知识总结
学习资料: 英文官方网站 Tensorflow 将要写的博客目录: 1.使用Spring AOP对异常进行统一处理 2.动态代理模式理解 aop中的动态代理模式 3.工厂模式三种的理解.logger ...
- Sublime Text使用配置介绍
这篇文章很多内容都是来源自网络,发布这里当作自己留个底,以后不用到处去找 对于文本编辑器,我用过notepad2.notepad++.Editplus.UltraEdit.Vim.TextPad,都没 ...
- FactoryMethodPattern(工厂方法)
/** * 工厂方法模式 * 分为四部分 * 1.产品接口 * 2.产品实例 * 3.工厂接口 * 4.工厂实例 * 工厂类最好用单例模式,但在这里主要是说明工厂方法,就不用单例了 * @author ...
- Elasticsearch索引(company)_Centos下CURL增删改
目录 返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 1.Elasticsearch索引说明 a. 通过上面几篇博客已经将Elastics ...
- java语言中Object转为String的几种形式
在java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能.本文将对常用的转换方法进行一个总结.常用的方法有Object.toString(),(String)要转换的对象,St ...
- js中兼容性问题的封装(能力检测)
所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题. 获得页面文本内容的方式:innnerText 或textConten ...