返回顶部的几种方法总结

返回顶部的几种方法总结返回顶部的几种方法总结

大家好,又见面了,我是你们的朋友全栈君。

1.锚点

但是唯一的缺点就是样式不怎么样,会显示这个锚标记。

<a name=”top” id=”top”></a>

放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可。

页面底部放置:

<a href=”#top”target=”_self”>返回顶部</a>

二、使用Javascript Scroll函数返回顶部

scrooll函数用来控制滚动条的位置,有两种很简单的实现方式:

方式1(推荐:简单方便):

<a href=”javascript:scroll(0,0)”>返回顶部</a>

<div  onclick=”javascript:scroll(0,0);”></div>

scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。

方式2(注重效果:缓慢向上):

本方式是渐进式返回顶部,要好看一些,代码如下:scrollBy函数第二个参数我设了-100,越大(比如-10)滚动越慢,越小滚动越快

function pageScroll() {

window.scrollBy(0,-10);//Only for y vertical-axis

scrolldelay=setTimeout(‘pageScroll()’,100);}

<a href=”pageScroll();”>返回顶部</a>   或者<a href=”pageScroll();”>返回顶部</a>

<a onclick=”pageScroll()”>返回顶部</a> 

这样就会动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。

if(document.documentElement.scrollTop==0)

clearTimeout(scrolldelay);

缺点:滚动效果不平滑,且在页面很长时点击返回顶部,未向上到达页面顶部无法再正常浏览页面; 
同上依旧是静态固定于页面底部,不一定能曝光在用户面前。

方式3

document.documentElement.scrollTop = document.body.scrollTop =0;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/154384.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • 基于JavaMail的Java邮件发送:简单邮件发送

    本文链接:http://blog.csdn.net/xietansheng/article/details/51673073电子邮件的应用非常广泛,例如在某网站注册了一个账户,自动发送一封欢迎邮件,通过邮件找回密码,自动批量发送活动信息等。但这些应用不可能和我们自己平时发邮件一样,先打开浏览器,登录邮箱,创建邮件再发送。本文将简单介绍如何通过Java代码来创建电子邮件,并连接邮件服务器发…

    2022年4月12日
  • C#获取url中参数键值对的方法建议收藏

    方法如下://////遍历Url中的参数列表//////如:(?userName=keleyi&userType=1)publicstringGetUrlParam(){stri

    2021年12月20日
  • Django(8)reverse函数「建议收藏」

    Django(8)reverse函数「建议收藏」reverse函数reverse函数的作用是用来进行URL反转的,接下来我们介绍reverse函数的几种用法之前我们都是通过url来访问视图函数。有时候我们知道这个视图函数,但是想反转回他的url

    2022年7月28日
  • mysql自定义函数详解_数据库自定义函数

    mysql自定义函数详解_数据库自定义函数1.创建自定义函数DELIMITER$$DROPFUNCTIONIFEXISTSgenPerson$$CREATEFUNCTIONgenPerson(namevarchar(20))RETURNSvarchar(50)BEGINDECLAREstrVARCHAR(50)DEFAULT”;SET@tableName=name;SETst…

    2022年9月4日
  • UVA 10600 ACM contest and Blackout(次小生成树)

    UVA 10600 ACM contest and Blackout(次小生成树)

    2021年9月4日
  • Mac环境变量配置(Java)

    Mac环境变量配置(Java)1.打开终端:2.输入命令:【/usr/libexec/java_home-V】,查看默认的jdk下载地址(绿色下划线的就是jdk默认路径)(注意⚠️:命令行终端是区分大小写的【-v是不对的,必须是大写-V】)3.如果是第一次配置环境变量,使用命令:【touch.bash_profile】创建一个.bash_profile隐藏配置文件(如果存在已有配置文件就输入:【open-e.bash_profile】)打开如下4.输入以下命令:(注意⚠️:红色字体是第2步查出来自己jd…

    2022年6月29日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号