Js、Jquery对goTop功能的实现

本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能，以及在这个过程中碰到的问题。

终于实现的效果类似：http://sc2.163.com/home（注意右下角的top）

代码：

Jquery

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body{height: 2000px;}#goTop{display: none;cursor:pointer;background: url("common.png") no-repeat scroll 0 -460px;position: fixed;width: 60px;height: 60px;right: 20px;bottom: 20px;text-indent: -9999px;z-index: 100;}#goTop:hover{background-position: -100px -460px;}</style><script src="../jQuery/jquery-1.11.3.js"></script><script>$(function(){$(window).scroll(function(){var scrH=document.documentElement.scrollTop+document.body.scrollTop;if(scrH>200){$('#goTop').fadeIn(400);}else{$('#goTop').stop().fadeOut(400);}});$('#goTop').click(function(){$('html,body').animate({scrollTop:'0px'},200);});});</script>
</head>
<body>
<a id="goTop" href="javascript:">返回顶层</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body{height: 2000px;}#goTop{display: none;cursor:pointer;background:url("common.png") no-repeat scroll 0 -460px;position: fixed;width: 60px;height: 60px;right: 20px;bottom: 20px;z-index: 100;text-indent: -9999px;}#goTop:hover{background-position: -100px -460px;}</style>
</head>
<body>
<a id="goTop" title="返回顶部" href="javascript:scroll(0,0)">返回顶层</a>
</body>
</html>
<script>(function() {function $(id){return document.getElementById(id);}window.οnscrοll=function(){var scrH=document.documentElement.scrollTop+document.body.scrollTop;if(scrH>200){$('goTop').style.display='block';}else{$('goTop').style.display='none';}};}());
</script>

代码好像没啥特别好解释了。说说我碰到的问题吧。

①在IE低版本号下。不支持rgba属性~

②原生js的动画效果还不会实现，希望有人留言教下。

转载于:https://www.cnblogs.com/yxysuanfa/p/7147218.html

Js、Jquery对goTop功能的实现相关推荐

帮助用户更好的体验网站：jQuery的页面功能向导插件Pageguide.js
为什么80%的码农都做不了架构师?>>> 日期:2012-6-15 来源:GBin1.com 在线演示本地下载大家可能都有过这样的开发经验,用户无法真正的了解如何使用一 ...
html5 复制到剪贴板兼容,js/jQuery实现复制到剪贴板功能，兼容所有浏览器
因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...
正在加载中-js/jQuery功能实现
前言最近在springMVC中集成一个基于jsp报表工具,在集成之后的,由于报表运算量很大,SQL语句比较复杂,所以前台点击按钮触发以后,呆上几秒才有反应过来弹出报表框,所以想加入一个类似正在加载中 ...
jQuery导航切换功能
jQuery导航切换功能 Css ----------------------------------------------------------------------------------- ...
超炫jQuery测试答题功能
推荐一款超炫jQuery测试答题功能插件实例代码 <body><div class="container" id="main">< ...
JS实现星星评分功能实例代码(两种方法)
转载自 JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...
html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点本 ...
Struts2 整合jQuery实现Ajax功能
为什么80%的码农都做不了架构师?>>> Struts2 整合jQuery实现Ajax功能技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝 ...
基于Jquery实现登录功能的前端页面
本篇文章讲解如何用jquery完成登录功能的前端页面展示 html部分: <div class="name"><label>用户名:</label&g ...
用Ajax+js+jQuery实现无闪烁定时刷新页面定时刷新
本人想在一个JSP页面上显示一个消息模块,这个消息需要定时更新,请问大家如何用Ajax+js+jQuery实现无闪烁定时刷新页面功能.本人使用的js框架是jQuery. 先说思路,那就是在前端用 js ...

Js、Jquery对goTop功能的实现

Js、Jquery对goTop功能的实现相关推荐

最新文章

热门文章