如何实现做一个简单的返回顶部效果按钮

最新推荐文章于 2024-03-20 09:42:58 发布
最新推荐文章于 2024-03-20 09:42:58 发布
阅读量5.1k 收藏 11
点赞数 6
分类专栏： 前端 文章标签： 如何实现做一个简单的返回顶部效果按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44546509/article/details/86518143
版权

如何实现做一个简单的返回顶部效果按钮

开发工具与关键技术：DW—jquery
作者：Mr_恺
撰写时间：2019.01.17

我们是不是在浏览网页的时候，可以看到网页右下都会有一个“返回顶部”的按钮，
点击它就回能回到顶部，那么怎样实现返回顶部的效果呢？

先HTML布局，用一个content的div存内容，a标签做返回顶部的图标
在这里插入图片描述
然后设置一下css样式，把返回图标定位
在这里插入图片描述

  1. 这是直接粗鲁的方法就是在,a标签那个跳转路径为空或者放#号，其实就是刷新一下网页，网页一闪，滚动条一样回到了上面
    在这里插入图片描述
    或
    在这里插入图片描述
  2. 这是带动画效果的滚动条：
    先把jquery插件，插件版本不做要求，我这引进jquery-3.2.1.js插件
    在这里插入图片描述
    设置一个方法：
    scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
    在这里插入图片描述
    这个方法:当滚动条小于500px时，那个返回顶部图标是隐藏的，当滚动条大于500px时，那个返回顶部图标是显示的 ，在这里插入图片描述
    给a标签绑定点击事件，返回顶部是相对于整个HTML与body文档，所以要获得HTML和body元素，然后设置动画效果使用插件里的animate方法，第一个参数scrollTop设置为0，这样滚轮条就会回到顶部，第二个参数是表示回到顶部的所需的时间，具体时间自己设置
    在这里插入图片描述
愷訫
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
这几种方法帮你快速实现回到页面顶部
「 虚幻私塾」
04-24 2831
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 背景介绍 当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “
回到顶部的按钮
天天的博客
12-25 1530
这个一般都是在页面比较高，一般右下角就有个按钮，一点就回到了页面的顶部！ 布局非常简单！ 就定在右下角呗！ 当点击的时候，让scrollTop 值准建变为0 !(用到简单的缓冲动画） <script> window.onload = function(){ var flag = false; // false 为手动...
js使用锚点回到顶部
qq_38822390的博客
04-09 545
使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style="po...
纯CSS实现button按钮
热门推荐
weixin_48463527的博客
12-03 1万+
纯CSS实现button按钮
vue 向下滑动显示返回按钮，点击按钮返回顶部示例
最新发布
wah1870714的博客
03-20 433
点击按钮后，回到顶部。
点击固定按钮让页面回到顶部
weixin_44551909的博客
02-19 1007
点击固定按钮回到页面顶部 开发工具与关键技术：DW /JS 作者：刘家龙 撰写时间：2019/2/18 下面跟大家分享一下如何点击固定按钮使页面回到顶部，这里使用到的是JS中的scrollTo方法。这个方法是把内容滚动到指定的坐标，所以在滚动之前就要定义好目的地坐标，现在我们要回到页面顶部，就把坐标设为（0，0）。为了体现效果我设置了7个div，并且给了它们不同的颜色，然后再进行编号。 回到顶...
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
10-21
主要介绍了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果,涉及javascript基于onscroll事件动态改变页面元素样式的相关技巧,需要的朋友可以参考下
一个简单的弹性返回顶部JS代码实现介绍
10-27
本文将详细介绍如何使用JavaScript实现一个具有弹性的返回顶部功能。 首先，我们来理解这个功能的基本需求：当用户滚动页面到底部时，显示一个返回顶部的按钮；点击该按钮时，页面应以弹性效果平滑地滚动回顶部；当...
基于Javascript实现返回顶部按钮
10-22
标题中的“基于Javascript实现返回顶部按钮”是指使用JavaScript编程语言来创建一个功能，当用户浏览网页至页面底部时，提供一个便捷的按钮让用户快速回到页面的顶部。这种功能对于长内容页面尤其有用，因为它提高了...
jquery配合css简单实现返回顶部效果
10-26
接下来是jQuery部分，这部分代码主要负责动态控制返回顶部按钮的显示和隐藏，以及实现点击后页面滚动到顶部的效果。首先，我们创建了一个包含按钮文本的元素`$backToTopEle`，并将其添加到`body`元素中。接着，我们...
漂亮的JQ“返回顶部” 按钮
凉城古梦猫扑街的博客
09-18 3131
模拟一下 B站 返回顶部 的按钮。 1、制作返回顶部 按钮。 2、控制在滚动条滑动超过800px时候，显示 “返回顶部”按钮，否则隐藏 3、鼠标事件，经过变色，离开恢复 4、bootstrap插件样式 第一张是 没有出现的 “返回顶部的”。 第二张滑动超过 800px 出现按钮。点击，一秒内返回顶部。（华丽的按钮） 一、准备的插件。 首先去 
返回顶部的几种方案
骆小胖~
03-02 763
制作浏览网页时返回页面顶部按钮
Mushan_vv的博客
08-28 875
这个暑假跑去领略了大西北的风景，没什么时间也变懒了，现在在做一个小项目，发现很多网页你浏览的时候都会有返回页面顶部的按钮，现在在这里总结一下 返回顶部按钮 制作返回顶部按钮 当浏览页面到第二页的时候显示返回顶部按钮，否则隐藏 点击返回顶部按钮返回到页面顶部 使用getScrollTop()函数 html代码 <body> <p>向下拖动滚动条（进入第二屏），右下角会出...
点击回到顶部的按钮
bahuanpu8594的博客
06-01 189
在很多网站页面中如果我们把页面下拉很多的时候，右边一般都有一个按钮点击可以直接回到顶部，并且无论滚动条下拉多少这个小方块都保持在右边画面中心 简单分析下我们知道，这个小方块是绝对定位，当我们拉动滚动条的时候获取滚动的距离，然后让方块的top值等于滚动的距离。触发方块的点击事件时让top值为0 一 html && css 代码如下： <style> ...
如何为网页添加返回顶部按钮
Destiny的专栏
08-16 4119
如何为网页添加返回顶部按钮   方法一：傻瓜式方法 1.在body的标签添加定位id 2.在最底部需要返回顶部的位置添加触发定位的代码 返回顶部 这种方法非常死板，必须让用户移动到正确的位置才能返回顶部。   方法二：稍微升级版 1.在head中加入样式 #returntop{ background:url(images/top.png) no-repeat;
html锚点 缓动,快速制作页面滚动（锚点定位）效果
weixin_33346418的博客
06-23 1577
当页面中内容过多时，我们常常会采用各种方式帮助用户快速定位到页面中的内容，如提供内容菜单、定位按钮、悬浮的导航栏等等。如果你想在设计项目中呈现这些效果，摹客在线设计就能帮你轻松做到。页面整体滚动制作页面滚动效果，需要用到交互命令“滚动”。首先，为页面中的组件添加交互，以作为交互目标的组件充当锚点(即页面滚动的目标位置)，如下图中的橙色圆圈。在交互弹窗中，选择命令“滚动”，还可以对滚动方式进行更详细...
回锚点和 返回顶部的代码
daisy
09-11 2627
1、html中直接使用设置锚点，即将a标签的herf设成要定位到的位置上的元素的id。     示例如下：     定位到div id="pos",则给一个a标签 a href="#pos">a>     2、返回顶部代码： 示例如下： $(function(){  $(".return").click(function()
Web前端 页面功能——点击按钮返回顶部的实现方法
06-11
实现点击按钮返回顶部的方法可以分为两种： 1. 使用 JavaScript 实现 在 HTML 中添加一个“返回顶部”按钮，并在 JavaScript 中绑定该按钮的点击事件，使其在点击时返回页面顶部。 HTML 代码： ```html <button id="backToTopBtn">返回顶部</button> ``` JavaScript 代码： ```javascript // 获取“返回顶部”按钮 var backToTopBtn = document.getElementById("backToTopBtn"); // 给按钮添加点击事件 backToTopBtn.onclick = function() { // 滚动到页面顶部的代码 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } ``` 2. 使用 CSS 实现 在 HTML 中添加一个“返回顶部”按钮，并使用 CSS 给该按钮添加 fixed 定位和动画效果，使其在点击时返回页面顶部。 HTML 代码： ```html <button id="backToTopBtn">返回顶部</button> ``` CSS 代码： ```css #backToTopBtn { position: fixed; bottom: 20px; right: 20px; display: none; animation: fadeIn 0.3s; } #backToTopBtn:hover { cursor: pointer; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ``` JavaScript 代码： ```javascript // 获取“返回顶部”按钮 var backToTopBtn = document.getElementById("backToTopBtn"); // 监听页面滚动事件 window.onscroll = function() { // 如果页面滚动距离超过了 500px，则显示“返回顶部”按钮，否则隐藏 if (document.documentElement.scrollTop > 500 || document.body.scrollTop > 500) { backToTopBtn.style.display = "block"; } else { backToTopBtn.style.display = "none"; } } ``` 以上两种方法都可以实现点击按钮返回顶部的功能，具体选择哪种方法取决于个人喜好和项目需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值