首页 每日编程 css知识 jquery如何实现点击网页回到顶部效果?(图文+视频)

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

Oct 13, 2018 pm 01:53 PM
jquery

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>回到顶部特效</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        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;
        }
    </style>
</head>
<body>
<h1>网页内容</h1>
<a href=""><p id="back"><br> 返回顶部</p></a>
</body>
<script>
    // 文档就绪
    $(function () {
        // 获取浏览器窗口
        $(window).scroll(function () {
            // 获取浏览器滚动条距离顶部的高度
            if ($(window).scrollTop() > 150) {
                // 设置按钮出现
                $(&#39;#back&#39;).fadeIn(1000)
            } else {
                // 设置按钮消失
                $(&#39;#back&#39;).fadeOut(1000)
            }
        })
    })
</script>
</html>
登录后复制

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

daa64b0b9aa586620603ed83a1d4e21.png

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

4e31ed05ef0519ef96a5dbc8ce085c3.png

注意:

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

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

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

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

以上是jquery如何实现点击网页回到顶部效果?(图文+视频)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

jQuery引用方法详解:快速上手指南 jQuery引用方法详解:快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法详解:快速上手指南

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?

jQuery如何移除元素的height属性? jQuery如何移除元素的height属性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性?

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

jQuery小技巧:快速修改页面所有a标签的文本

使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

使用jQuery修改所有a标签的文本内容

深度剖析:jQuery的优势与劣势 深度剖析:jQuery的优势与劣势 Feb 27, 2024 pm 05:18 PM

深度剖析:jQuery的优势与劣势

了解jQuery中eq的作用及应用场景 了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

了解jQuery中eq的作用及应用场景

如何判断jQuery元素是否具有特定属性? 如何判断jQuery元素是否具有特定属性? Feb 29, 2024 am 09:03 AM

如何判断jQuery元素是否具有特定属性?

See all articles