Web前端 页面功能——点击按钮返回顶部的实现方法

最新推荐文章于 2024-07-11 17:32:07 发布
最新推荐文章于 2024-07-11 17:32:07 发布
阅读量1.7k 收藏 3
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/mokeycode/p/10473699.html
版权
本文介绍了三种实现Web页面返回顶部的功能方法：最简单的静态跳转、使用JavaScript模拟滚动效果和动态按需加载的jQuery动画效果。分别讨论了它们的优缺点，如返回效果、用户可见性和平滑滚动。对于长页面，添加返回顶部功能可以提升用户体验。
摘要由CSDN通过智能技术生成

 

1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能

方法一：用命名锚点击返回到顶部预设的id为top的元素

html代码 
<a href="#top" target="_self">返回顶部</a>

方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）

html代码 
<a href="javascript:scroll(0,0)">返回顶部</a>

 缺点：返回效果是立即的，不符合一般浏览页面的滚动感觉；

         静态固定于页面底部，用户不一定看得到。

 

2. 简单的静态返回顶部，用js模拟滚动效果上滑至顶部

复制代码
复制代码
js代码
最低0.47元/天 解锁文章
weixin_30466421
关注
html返回顶部代码（简单）
08-11 3184
方法一：用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a> 方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置） <a href="javascript:scroll(0,0)">返回顶部</a> ...
JS返回顶部代码
11-09
JS效果返回顶部代码，学习时写的，如有问题请留言。javascript返回顶部代码
简单返回顶部代码及注释说明（转）
管子（zero）的杂乱空间
09-07 331
最近做了一个排行榜页面，分类较多，并且以图文形式展示......最后页面明显过长了，用户体验自然不够好。最后想着在页面上部增加了页面内跳转导航，直接导航到本页的分类命名锚块。当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长，内容薄弱关联性不够的跳出率会很高。 下面就说下简单的返回顶部效果的代码实现，附注释说明。 1. 最简单的静态返回顶部，点击直接跳...
vue里实现点击按钮回到页面顶部功能，博客必备！
最新发布
Zwwxd666的博客
07-11 317
回调判断滚动高度是否大于视口高度的1/2如果是，则设置动态样式的opacity为1，不是则隐藏为0。点击按钮触发置顶，scrollTo(0,0)滚动到 x y都为0的位置，也就是左上角。动态绑定样式style，监听点击事件，后续控制opacity透明度。实例及组件挂载后监听。
返回顶部完整代码
weixin_33826268的博客
12-13 183
下面是使用jQuery实现的“返回顶部”的完整代码，可以点击这里体验效果：http://www.keleyi.com/keleyi/phtml/gototop.htm &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
返回顶部的代码
weixin_34138255的博客
01-08 194
top.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;..
返回顶部代码
qq_29188707的博客
04-11 522
$(’#btn_top’).click(function () { $(‘html,body’).animate({ scrollTop: 0 }, 500); });
Web页面返回顶部代码
iteye_6055的博客
08-03 436
篇幅过长，总是不利于操作，返回顶部能更友好的操作。 1.html代码 &lt;div style="display:none;" class="back-to" id="toolBackTop"&gt; &lt;a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top&quot
网页返回顶部代码
03-20
由IBEIDONG.COM提供的，返回网站顶部代码，在顶部的时候图标隐藏，向下滚动后显示。
网页中返回顶部代码(多种方法)另附注释说明
01-21
下面就说下简单的返回顶部效果的代码实现，附注释说明。 1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能 方法一：用命名锚点击返回到顶部预设的id为top的元素 代码如下: <a>返回顶部</a> 方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置） 代码如下: <a>返回顶部</a> 缺点：返回效果是立即的，不符合一般浏览页面的滚动感觉； 静态固定于页面底部，用户不一定看得到。 2. 简单的静
一款漂亮的返回顶部代码
10-31
摘要: 此代码效果：超出首屏范围，即会出现TOP按钮，否则自动隐藏。 下载附件，放到网站的根目录，然后在网站的对应页面放入一下代码： 此代码效果：超出首屏范围，即会出现TOP按钮，否则自动隐藏。 下载附件，放到网站的根目录，然后在网站的对应页面放入一下代码： [代码]xml代码： 1 2 3 4 goTopEx();
Javascript返回顶部代码实现
04-14
NULL 博文链接：https://tjuking.iteye.com/blog/1743229
页面点击回到顶部代码
11-12
点击回到顶部，网站开发时，有个页面点击回到顶部
返回页面顶部代码
Sea_water778的博客
02-11 1127
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
简单回到顶部代码
程序生活
06-05 4512
&amp;amp;lt;div id=&amp;quot;hqestop&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;backtop&amp;quot;&amp;amp;gt; &amp;amp;lt;!-- onfocus=&amp;quot;this.blur();去
返回顶部按钮代码
qq_42633296的博客
01-03 408
返回顶部按钮代码 .backToTop {display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; rig...
一段简单的网页返回顶部和返回底部代码（html+css+jquery）
油腻青年
03-29 2216
最近用到了返回顶部和底部功能，找了找，查了查，改了改，最终实现效果大概这样子。
Web前端作业模板：个人网页设计与功能实现
7. 天气查询功能实现 天气查询功能可以增加个人网页的实用性。用户可以在网页上输入城市名称，然后通过JavaScript调用天气API来获取并展示实时天气信息。这涉及到的知识点包括表单元素（如和）的使用，以及如何处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值