返回顶部的几种方法总结

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

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

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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • tfs安装教程_2010版cad安装教程

    tfs安装教程_2010版cad安装教程(说明:略过IIS6.0、SQLServer和SharePoint的安装)(说明:需要注意是32位版本还是64位版本)1、配置SQLServer。打开SQLServerConfigurationManager,左边树中展开SQLServer网络配置-MSSQLSERVER的协议,确保右边的“TCP/IP”和“命名管道”全都启用,如果已经禁用则启用,如下图示: 2、

    2022年9月23日
    0
  • NSTimer scheduledTimerWithTimeInterval与timerWithTimeInterval、initWithFireDate的区别

    NSTimer scheduledTimerWithTimeInterval与timerWithTimeInterval、initWithFireDate的区别英文原文是这样的:Atimerobjectcanberegisteredinonlyonerunloopatatime,althoughitcanbeadded

    2022年7月1日
    18
  • 算法时间复杂度的计算

    算法时间复杂度的计算一、算法时间复杂度定义在进行算法分析时候,语句总的执行次数T(n)是关于问题规模n的函数,进而分型T(n)随着n的变化情况并确定T(n)的数量级.算法的时间复杂度,也就是算法的时间度量记作:T(n)=O(f(n)).它表示随着问题规模n的增大,算法执行时间的增长率和f(n)的增长率相同,称作算法的渐近时间复杂度,简称时间复杂度.其中f(n)是问题规模n的某个函数.简单来说T…

    2022年5月14日
    49
  • java程序设计图书管理系统源码(java图书管理系统设计报告)

    图书管理系统需实现的功能如下:(1)用户管理:包括用户的注册于登录。(2)图书管理:包括录入、查询、修改和删除图书信息。(3)借书:包括借阅图书和查看借书记录。(4)还书:包括还书和查看还书记录。(5)为了保证系统安全,进入系统时,对用户登录的密码进行加密与解密。源码、课程设计报告、数据库表图的百度网盘链接:https://pan.baidu.com/s…

    2022年4月12日
    78
  • 启动磁盘不能被分区或恢复成单个分区-解决了

    启动磁盘不能被分区或恢复成单个分区-解决了1,找到mac自带的“磁盘工具”。2,使用磁盘工具把多余的系统盘选择使用“抹掉”功能。3,抹掉磁盘选格式改为EXFAT格式。4,再一次使用BootCamp就可以恢复了。抹掉后,可以在磁盘分区中直接删除对应windows分区,这样就会合并为一个分区了,可以接着重新安装windows步骤参考文档:此文档少了上面的步骤,所以失败https://blog.csdn.net/weixin_35940949/article/details/112507403安装参考文档https://..

    2022年8月11日
    91
  • js 正则替换换行符

    js 正则替换换行符vardiv=document.getElementById(‘div’);vars=div.innerHTML.replace(/(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))/g,””);//g的意思是:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。//取消了空格之后在做其他的替换才可以,否则不能替换

    2022年5月24日
    136

发表回复

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

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