一、案例描述

页面内容很多，当滚动条滚动的实际高度>=窗口可视高度时，出现向上的按钮，一点按钮就会回到顶部。

二、案例效果演示

“我是内容”处于整屏的末尾，当页面滚动到此位置时，上滑按钮就会出现。

三、案例局部代码

css代码：

<style type="text/css">body,html{height: 100%;margin: 0;padding: 0;}.backTop{width: 40px;height: 40px;background-color: green;text-align: center;color: #fff;line-height: 40px;font-size: 20px;position: fixed;right: 0;bottom: 0;}.content{border: 1px solid red;height: 3000px;}
</style>

html代码：

<!-- 返回顶部的按钮start -->
<div class="backTop">^
</div>
<!-- 返回顶部的按钮end -->
<div class="content">我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容<br />我是内容2<br />
</div>

js代码：

四、案例整体代码

<script>$(function() {$(".backTop").hide();//默认隐藏按钮$(window).scroll(function() {if ($(this).scrollTop() >= $(this).height()) { //判断条件2：如果滚动条滚动的实际高度>=窗口可视高度，则.backTop出现$(".backTop").fadeIn(500); //淡入，设置渐变时间持续0.5秒} else {$(".backTop").fadeOut(500); //淡出}});$(".backTop").click(function() {$("body,html").animate({//html是最外层标签，可以代表整个页面；body 是它二级标签，可以用它代表页面的文档部分// "body,html"都写上，兼容多浏览器scrollTop: 0}, 1000); //1000是滚动到顶部所需要的时间1秒})});
</script>

五、总结

1.默认情况下，先将按钮隐藏，当滑动页面超出一屏，也就是所谓的滚动条滚动的实际高度>=窗口可视高度，这时让按钮出现，对按钮绑定点击事件，点击之后让整屏的滚动条高度变为0，也就是所谓的滚动条没有高度，没有高度就代表着页面在最顶端。
2.scroll():https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scroll
3.scrollTop():https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

六、新增，滑动到指定位置出现按钮

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./js/jQuery.min.js"></script><title>Document</title><style>.parent {width: 400px;height: 400px;background-color: red;margin: 100px;position: relative;}.son {width: 100px;height: 100px;background-color: green;position: absolute;left: 10px;top: 10px;}.backTop {width: 80px;height: 50px;line-height: 50px;text-align: center;background-color: black;color: #fff;position: fixed;bottom: 50px;right: 10px;display: none;}#main {width: 500px;height: 1000px;background-color: #9ebc19;}</style>
</head><body><div class="backTop">返回顶部</div><div class="parent"><div class="son"></div></div><div id="main"></div><script>$(function() {$(window).scroll(function() {var $mtop = $('#main').offset().top; //元素距离文档上方的高度var $jtop = $(document).scrollTop(); //卷起来的高度// 如果卷起来的高度大于元素在页面可见的高度，让按钮显示if ($jtop >= $mtop) {$('.backTop').show();} else {$('.backTop').hide();}});//点击返回顶部按钮。（1秒之内）$('.backTop').click(function() {$('html,body').animate({scrollTop: 0}, 1000)});});</script>
</body></html>

jquery案例15——jq回到顶部相关推荐

php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）
本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果. 我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧. 这种点击回到顶部 ...
HTML学习笔记之二（回到顶部与回到底部）
回到顶部回到底部回到顶部的俩种方式一.使用js [javascript] view plaincopy $('html, body').animate({ scrollTop: 0 }, 'fa ...
Jquery 回到顶部
转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图) 先来看几个图片效果 ...
一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部
前言今天在网上搜索"回到顶部"的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery ...
回到顶部和返回首页jquery插件
打造最全的CMS类教程聚合! 第一种方法:在网页<body></body>之间插入:  <div id="full&quo ...
jq怎么回到顶部和回到尾部_回到学校系列为孩子们提供开放资源
jq怎么回到顶部和回到尾部全球各地的孩子们都回到学校了! 有没有比免费和开放的教育资源和工具更好的帮助他们成长并充分利用学校的方法? Opensource.com将于9月8日至19日举办为期两周的开 ...
html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器回到顶部和回到底部在当前的网页中应用时相当广泛的为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动那么我们就要 ...
jquery 回到顶部动画
jquery 回到顶部简单动画适配主流浏览器 html <a href="javascript:;" id="backup"></a> ...
隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码
在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 回到顶部 JS代码: $(document).ready(function() { //首先将#back-to-top隐藏 $ ...
回到顶部 jquery
//回到顶部$(function() {$.fn.backToTop = function(options) {var defaults = { showHeight : 120,speed : 10 ...

jquery案例15——jq回到顶部