使用jQuery实现返回顶部

前言

最近要设计一个网页，想实现一个类似于菜鸟教程的返回顶部按钮，但找了很久都没找着合适的实现方法，最后自己结合菜鸟教程的设置和网上的其他一些设置，自己结合jQuery实现了这个功能。

希望能对你有所帮助。

效果图

点击右下角的小方块可以返回网页顶部

实现

首先设置一个贴附在网页右下角的div小块的css

    <style>.fixed-btn {position: fixed;right: 1%;bottom: 5%;width: 40px;border: 1px solid #eee;background-color: white;    /*背景颜色，可自己更改*/font-size: 24px;z-index: 1040;}</style>

设置一个放在放在上面那个div里的a元素的css

        #btn_top {text-decoration:none;  /*取消连接的下划线*//*使这个zhana元素称为块级元素，并使他能够占满div*/display:block;height:100%; width:100%;   }

然后再用jQuery实现功能

    <script>$(function () {$('.fixed-btn').hide();   //先让回顶部的div隐藏$(window).scroll(function () {//当网页滑下一定距离时使返回顶部的div出现if ($(window).scrollTop() >= 200) {$('.fixed-btn').fadeIn();}else {$('.fixed-btn').fadeOut();}});});//这里是使ID为btn_top的可点击元素实现回到顶部的点击事件$('#btn_top').click(function () {$('html,body').animate({ scrollTop: 0 }, 500);});</script>

完整的style和body部分HTML代码

<style>.fixed-btn {position: fixed;right: 1%;bottom: 5%;width: 40px;border: 1px solid #eee;background-color: white;font-size: 24px;z-index: 1040;}#btn_top {text-decoration:none; height:100%; width:100%; display:block;}
</style>
<body><!--网页内容--><!--返回顶部--><div class="fixed-btn text-center"><a  id="btn_top" href="javascript:void(0)"> ↑</a></div><script>$(function () {$('.fixed-btn').hide();$(window).scroll(function () {if ($(window).scrollTop() >= 200) {$('.fixed-btn').fadeIn();}else {$('.fixed-btn').fadeOut();}});});$('#btn_top').click(function () {$('html,body').animate({ scrollTop: 0 }, 500);});</script>
</body>

使用jQuery实现返回顶部相关推荐

js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
jQuery实现返回顶部
jQuery实现返回顶部(gotop) 最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不 ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
用jQuery实现返回页面顶部的功能
页面中有返回顶部的图标用起来使我们预览页面更方便,这个功能也是在网站中常见的功能,今天研究了一个简单的例子,用jQuery实现返回顶部的功能: css代码如下: *{ margin:0; paddin ...
隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码
在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 回到顶部 JS代码: $(document).ready(function() { //首先将#back-to-top隐藏 $ ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...
jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
jquery返回顶部
Jquery返回顶部插件使用简单,步骤如下: 1.引用插件js和css文件 2.设置默认参数(showHeight :设置滚动高度时显示.speed :返回顶部的速度以毫秒为单位) $(functio ...

使用jQuery实现返回顶部

目录

前言

效果图

实现

完整的style和body部分HTML代码

使用jQuery实现返回顶部相关推荐

最新文章

热门文章