返回顶部的几种方法总结

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

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

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


相关推荐

  • HashMap和HashTable的理解与区别

      Hashtable是java一开始发布时就提供的键值映射的数据结构,而HashMap产生于JDK1.2。虽然Hashtable比HashMap出现的早一些,但是现在Hashtable基本上已经被弃用了。而HashMap已经成为应用最为广泛的一种数据类型了。造成这样的原因一方面是因为Hashtable是线程安全的,效率比较低。也可能是Hashtable开始设计的时候没有遵循驼峰命名法(手动笑哭…

    2022年4月6日
  • 推送 从入门到放弃的文案_百度推送自己不喜欢的内容

    推送 从入门到放弃的文案_百度推送自己不喜欢的内容推送推送简直就是一种轻量级的骚扰方式自从有了推送,各个公司基本上都在使用推送,这确实是一个比较好的提醒方式,Android较iOS强的一个部分,也就是在于Android的Notification。Google教育我们利用好Android的通知模块,做更多友好的交互,可这句话,翻译成中文,不知不觉,就变成了在Notification中推送各种广告,而且仅仅就是一些广告,Notificatio

    2022年9月28日
  • 我的手机软件

    我的手机软件总结一下现在我装的软件,这些我都有安装版,兄弟们可以复用:)我的手机:Nokia6680操作系统:Symbian60Ⅲ目前手机上装的:6630EditableQuickOffice2.sisoffice套件,实际用的很少。6681字典字库.SIS字典,有用。ACM超级来电管家来电管家,当然有用啦,防火墙,自动短信回复…

    2022年7月11日
  • Oracle插入(insert into)

    Oracle插入(insert into)Oracle插入(insertinto)转载:http://www.oraclejsq.com/article/010100199.htmlOracle对表数据的插入是使用insert命令来执行

    2022年7月1日
  • hdu 4944 FSF’s game(数论)

    hdu 4944 FSF’s game(数论)

    2022年1月1日
  • 面向对象初接触

    面向过程和面向对象的概念解耦的理解序言在写今天的内容之前先说叨几句,其实在python这门编程语言中的所有内容可以归结为俩种类型:一种是面向过程编程另一种是面向对象编程那么问题来了,之前听有些

    2022年3月29日

发表回复

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

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