php 回到顶部,jquery如何实现点击网页回到顶部效果?(图文+视频)

本篇文章主要给大家介绍如何用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的话,则设置按钮出现,相反则设置按钮隐藏。最后通过浏览器访问,效果如下:

70e074a11a9da472a42605b71a12c55b.png

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

467c2929f1898b364fa5bf22dc87aa56.png

注意:

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/343321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【渝粤教育】国家开放大学2019年春季 2114人体解剖生理学 参考试题

试卷代号:2114 人体解剖生理学 试题 2019年7月 一、单项选择题(每题2分,共80分) 1.上皮组织的特点不包括( )。 A.包括被覆上皮和腺上皮 B.分布于体表及有腔器官的腔面 C.含丰富血管、神经 D.具有保护作用 E…

rs485中继器产品功能特点及应用领域介绍

中继器是连接网络线路的一种装置,常用于两个网络节点之间物理信号的双向转发工作。rs485/422中继器是最简单的网络互联设备,主要完成物理层的功能,负责在两个节点的物理层上按位传递信息,完成信号的复制、调整和放大功能&#xff…

【渝粤教育】国家开放大学2019年春季 2441经济数学基础1 参考试题

试卷代号:2441 2 0 1 9年春季学期期末统一考试 经济数学基础1 试题 2019年7月 导数基本公式: 积分基本公式: ( 一、单项选择题(每小题4分,本题共20分) 1.下列函数中为奇函数的是( )&#xff0…

使用JDK 13查看TLS配置

JDK 13 Early Access Build 16现在可用,它带来的有趣的功能之一是能够使keytool命令行工具显示当前系统的TLS配置信息 。 这比尝试在单独的文档中查找受支持的TLS信息并使该信息与自己的JDK供应商和版本更容易。 要查看JDK 13 Early Access Build 16的TLS配置详细信…

php只显示一部分文章,typecho同一个页面下调用不同分类的文章但是却只显示一个分类文章...

typecho同一个页面下调用不同分类的文章但是却只显示一个分类文章作者:佚名来源:爱好者时间:2018-04-30问题描述:同页面调用分类下文章,只显示一第一个分类下的文章在一个页面中,反复调用下面这段代码&…

串口服务器常见异常情况排除方法介绍

串口服务器就像一台带CPU、实时操作系统和TCP/IP协议的微型电脑,方便在串口和网络设备中传输数据。在使用串口服务器的过程中,一般按照操作手册进行操作基本上可以解决问题,但是,在实际操作中还是会出现一些异常故障,今…

【渝粤教育】国家开放大学2019年春季 2712园艺基础 参考试题

试卷代号:2712 园艺基础 试题 2019年7月 一、单项选择题(每题3分,共30分) 1.由种子萌发后胚根向下生长形成的根是( )。 A.块根 B.侧根 C.主根 D.不定根 2.补光…

【渝粤教育】国家开放大学2019年春季 3717天然气管道长输技术 参考试题

科目编号:3717 座位号 2018-2019学年度第二学期期末考试 天然气管道长输技术 试题 2019年 5 月 一、填空题(本大题共5空,每空5分,共计25分) 1.流体在管道中的流态划分为两大类:和。 2&#xff…

ckfinder php 配置,php – 在Laravel 5中为CKEditor设置路径以使用CKFinder

您好我正在尝试将CKFinder与CKEditor集成到一个laravel项目中.我在CKEditor的config.js文件中进行了以下设置:CKEDITOR.editorConfig function( config ) {// Define changes to default configuration here. For example:// config.language fr;config.uiColor …

工业级光模块是什么?

可能很多人都不知道,光模块是所有网络连接部署中不可或缺的组成部分。一个产品的出现往往与市场需求相对应,我们平时所接触到的光模块大部分只能满足商业数据中心的网络部署,那么大型工业的网络部署该如何满足实现呢?在这种情况下&#xff0…

【渝粤教育】国家开放大学2019年春季 770房地产估价 参考试题

编号:0770 座位号 2018-2019学年度第二学期末考试 房地产估价 试 题 2019年7月 一、填空题(每空3分,共30分) 1、建筑密度是指一块土地上所有建筑物的 占该块土地 的比例。 2、在实际中运用假设开发法估价的结果的可靠性如何&…

jvm开源_开源JVM Sampling Profiler

jvm开源众所周知 ,大多数现有的采样Java Profiler都必须在安全的地方进行堆栈跟踪收集。 诸如采样探查器之类的探查器就是这种情况,它使用SUN / Oracle管理代理来收集其堆栈跟踪。 这种方法的问题在于,由于不是程序中的每个点都不是安全点&am…

【渝粤教育】国家开放大学2019年春季 97纳税筹划 参考试题

试卷代号:[0097] 座位号 2018-2019学年度第二学期期末考试 纳税筹划 试题 2019年 7 月 单项选择题(将每题四个选项中的唯一正确答案的字母序号填入括号。每小题2分,共20分) 1.避税最大的特点是它的( )。 …

discuz和php的区别,discuz和phpwind优劣比较

discuz!(简称dz)和phpwind(简称pw)是国内最著名的两个PHP论坛系统,随着它们相继宣布开源以后,在各方面,不管技术上,还是功能上,还是界面上,都有了长足的发展,声威大振,远非国外那些功…

串口服务器常见五大问题解决方案

串口服务器提供串口转网络功能,使得串口设备能够立即具备TCP/IP网络接口功能,连接网络进行数据通信,极大的扩展串口设备的通信距离。为了更方便我们操作和使用,今天飞畅科技的小编来为大家介绍下串口服务器常见五大问题解决方案&a…

【渝粤题库】陕西师范大学200641高等数学作业(高起专、专升本)

《高等数学(一)》作业 一、求下列函数的定义域 (1); (2)。 (3) 二、用区间表示变量的变化范围: (1); (2) (3); 三、求下…

为特使构建控制平面的指南-为可插入性构建

Envoy是一个非常强大的软件,每天都会向社区提出新的用例和新的贡献 。 尽管Envoy的核心非常稳定,但它基于可插入的过滤器体系结构,因此人们可以为不同的L7协议编写新的编解码器或添加新的功能。 目前,Envoy过滤器是用C 编写的&…

【渝粤教育】广东开放大学 21秋期末考试 公共政策学10855K1

判断题 1、公共政策过程大致包括社会问题、问题确认、政策规划、政策采纳、政策执行和效果评估六个环节。(2 分) 正确 错误 2、政党对政策制定的影响往往是靠竞争来实现的。(2 分) 正确 错误 3、在一定条件下,物质性政…

php 获取数据库中的信息,php获取数据库中数据的实现方法

废话不多说,直接上代码header("Content-type:text/html;charsetutf-8");//字符编码设置$servername "localhost";$username "root";$password "root";$dbname "web";// 创建连接$con mysqli_connect($server…

【渝粤教育】10180k2_统计基础_21秋考试

1、次数分配数列是()。(2 分) A.按数量标志分组形成的数列 B.按品质标志分组形成的数列 C.按统计指标分组所形成的数列 D.按数量标志和品质标志分组所形成的数列 2、下列指标中属于时…