返回顶部的几种方法总结

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

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

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


相关推荐

  • WebSocket 详解教程

    WebSocket 详解教程概述WebSocket是什么?WebSocket是一种网络通信协议。RFC6455定义了它的通信标准。WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯

    2022年7月4日
    20
  • c语言中按位异或运算_c语言按位与怎么算

    c语言中按位异或运算_c语言按位与怎么算按位与运算符:&语法expression&expression备注表达式可以是其他“与”表达式,或(遵循下面所述的类型限制)相等表达式、关系表达式、加法表达式、乘法表达式、指向成员的指针表达式、强制转换表达式、一元表达式、后缀表达式或主表达式。按位“与”运算符(&)会将第一操作数的每一位与第二操作数的相应位进行比较。如果两个位均为1,则对应的结果位将设置为1

    2022年10月12日
    0
  • JsonPath使用

    JsonPath使用JSONPath-是xpath在json的应用。xml最大的优点就有大量的工具可以分析,转换,和选择性的提取文档中的数据。XPath是这些最强大的工具之一。如果可以使用xpath来解析json,以下的问题可以被解决: 1,数据不使用特殊的脚本,可以在客户端交互的发现并取并获取。2,客户机请求的JSON数据可以减少到服务器上的相关部分,这样可以最大限度地减少服务器响应的带宽使用…

    2022年6月18日
    28
  • jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm效果图如下:代码如下:转自

    2021年12月26日
    48
  • 互联网广告综述之点击率特征工程

    互联网广告综述之点击率特征工程

    2021年9月11日
    52
  • DirectoryExists

    DirectoryExists判断文件夹是否存在关键点GetFileAttributesTheGetFileAttributesfunctionretrievesattributesforaspecifiedfileordirec

    2022年7月2日
    20

发表回复

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

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