本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果。

我们在浏览各大网站页面时，想必大家肯定都遇到过，当阅览一个长页面时，拉到下面部分会出现类似回到顶部的按钮特效吧。

这种点击回到顶部的功能特效，可以很大程度上提高用户体验。那么实现这样的功能也是非常简单的。

下面我们就通过简单的代码示例，为大家介绍用jquery实现点击回到顶部的功能方法。

回到顶部特效

body {

text-align: center;

}

h1 {

width: 1200px;

height: 1500px;

background: #eee;

margin: 30px auto;

}

a {

text-decoration: none;

color: #fff;

}

p#back {

text-align: center;

position: fixed;

bottom: 100px;

right: 60px;

background: #000;

border-radius: 3px;

height: 50px;

width: 80px;

display: none;

}

网页内容

返回顶部

// 文档就绪

$(function () {

// 获取浏览器窗口

$(window).scroll(function () {

// 获取浏览器滚动条距离顶部的高度

if ($(window).scrollTop() > 150) {

// 设置按钮出现

$('#back').fadeIn(1000)

} else {

// 设置按钮消失

$('#back').fadeOut(1000)

}

})

此段代码中我们主要引用了一个jquery的线上库，并写了一些简单的HTML页面和js代码判断，当滚动条距顶部的高度大于150的话，则设置按钮出现，相反则设置按钮隐藏。最后通过浏览器访问，效果如下：

然后我们拖动滚动条往下，会缓慢出现回到顶部的按钮，效果如下图：

注意：

fadeIn()方法使用淡入效果来显示被选元素，假如该元素是隐藏的。(本例中，参数设为1000毫秒，表示选定元素的淡入过渡时间为1000毫秒，如果设为0，则会立即出现被选元素。)

fadeOut()方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。(参数同上)

本篇文章就是关于jquery实现网页回到顶部的效果方法介绍，简单易懂，希望对需要的朋友有所帮助！

想要了解更多前端相关知识，可以关注PHP中文网jQuery视频教程或者HTML视频教程，CSS视频教程、Bootstrap视频教程等等相关视频教程，欢迎大家参考学习！

php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）相关推荐

jquery简单实现点击弹出层效果实例
先看效果图: 完整例子:  <div id="race"><a href="#">点击</ ...
h5：jquery+xgplayer实现点击封面全屏播放视频
点击播放后的效果封面 {{-- 视频 start --}} <div class="video-container" data-src="视频地址" d ...
点击返回页面顶部（h5、js、jQuery 三种方式）
当页面过长时,通常会在滚动条到一定位置时设置按钮,点击可以快速返回顶部或者指定的位置处. 参考文档:jQuery中页面返回顶部的方法总结方法一:锚点定位当点击a标签,会直接返回到顶部:如果p标签有 ...
点击a标签，跳转到同一页面的指定内容，类似于点击按钮回到页面顶部效果
点击a标签,跳转到同一页面的指定内容,类似于点击按钮回到页面顶部效果这个效果实现方式很简单,只需要在a标签href内填上id名,在内容标签内加入id="名"便可. 下面是实现效果 ...
php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多，不刷新页面加载更多数据！附：可用源码+demo...
先上效果: 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了! 新建index.php jQuery+p ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
mui点击添加类名_Mui使用jquery并且使用点击跳转新窗口的实例
网上好多朋友是这样做的: 全局插入了js代码 mui('body').on('tap', 'a', function () { document.location.href = this.href; ...
jQuery自动完成点击html元素
1 /************************************************************************** 2 * jQuery自动完成点击html元素 ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...

php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）

网页内容

php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）相关推荐

最新文章

热门文章