返回顶部的几种方法总结

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

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

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


相关推荐

  • mybatis中LIKE模糊查询的几种写法以及注意点

    mybatis中LIKE模糊查询的几种写法以及注意点mybatis中对于使用like来进行模糊查询的几种方式:(1)使用${…}注意:由于$是参数直接注入的,导致这种写法,大括号里面不能注明jdbcType,不然会报错org.mybatis.spring.MyBatisSystemException:nestedexceptionisorg.apache.ibatis.reflection.ReflectionExc…

    2022年5月7日
    68
  • ubuntu LAMP 配置

    ubuntu LAMP 配置ubuntuLAMP配置文件位置:apache:/etc/apache2/apache2.confphp:/etc/php5/apache2/php.inimysql:/etc/mysql/my.cnfubuntuLAMP常见命令:apache重启:sudo/etc/init.d/apache2restart…

    2022年5月24日
    40
  • kafka集群操作命令「建议收藏」

    kafka集群操作命令「建议收藏」1.修改kafka配置文件 broker.id=0zookeeper.connect=192.168.1.10:2181,192.168.1.12:2181,192.168.1.13:2181/kafka 说明: 默认Kafka会使用ZooKeeper默认的/路径,这样有关Kafka的ZooKeeper配置就会散落在根路径下面,如果你有其他的应用也在使用ZooKee…

    2022年5月16日
    45
  • 全012路规律_双元素集合怎么判断

    全012路规律_双元素集合怎么判断堆题目链接将一系列给定数字顺序插入一个初始为空的小顶堆H[]。随后判断一系列相关命题是否为真。命题分下列几种:x is the root:x是根结点;x and y are siblings:x和y是兄弟结点;x is the parent of y:x是y的父结点;x is a child of y:x是y的一个子结点。输入格式:每组测试第1行包含2个正整数N(≤ 1000)和M(≤ 20),分别是插入元素的个数、以及需要判断的命题数。下一行给出区间[−10000,10000]内的N个要被

    2022年8月8日
    5
  • administrator改名字_win10改了用户名无法登录

    administrator改名字_win10改了用户名无法登录网友求助:xp用administrator_XP系统修改administrator的用户名_xpadministrator问题不想添加多一个用户的办法?????????????????最佳答案说实话没有看懂题主的要求。我只能从你题面对描述,即将高级管理员帐户“Administrator”改变成其他名字来解答。要想将WindowsXP中要将默认的系统用户名改变成其他名称是可以实现的,但是需要调用“组…

    2022年10月14日
    4
  • 把AutoEventWireup属性关闭

    把AutoEventWireup属性关闭1、关于AutoEventWireup属性的作用:,自动关联页面的Page_Load、Page_Init事件,好处就是不用再多写委托代码或重载代码了啦,坏处就是性能(听说的)和不直观性(影响菜鸟升级,“没见到事件关联它为什么会执行这段代码呢?”)。2、删除:(1)、在aspx页面一个个将“AutoEventWireup=true”改为“AutoEventWireup=false”了

    2022年5月28日
    38

发表回复

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

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