返回顶部的几种方法总结

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

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

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


相关推荐

  • java voliate,voliate 的实现原理是什么【面试题详解】「建议收藏」

    java voliate,voliate 的实现原理是什么【面试题详解】「建议收藏」今天爱分享给大家带来voliate的实现原理是什么【面试题详解】,希望能够帮助到大家。volatile可以保证线程可见性且禁止指令重排序,但是无法保证原子性。在JVM底层volatile是采用“内存屏障”来实现的,加入volatile关键字时,汇编后会多出一个lock前缀指令。lock前缀指令其实就相当于一个内存屏障。happen-before原则保证了程序的“有序性,对volatile变量的…

    2022年6月9日
    38
  • 你应该知道的10个奇特的 HTML5 单页网站「建议收藏」

    你应该知道的10个奇特的 HTML5 单页网站「建议收藏」网页设计师努力寻找新的方式来展现内容。其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站。下面是10个令人惊叹的单页H​​T

    2022年8月3日
    5
  • 百度mp3接口

    百度mp3接口

    2021年12月17日
    61
  • docker 修改容器时间_docker容器时间与宿主机不一致

    docker 修改容器时间_docker容器时间与宿主机不一致前言用docker搭建的Jenkins环境时间显示和我们本地时间相差8个小时,需修改容器内部的系统时间查看时间查看系统时间date-R进入docker容器内部,查看容器时间dockere

    2022年8月6日
    4
  • word2vec原理与实现「建议收藏」

    word2vec原理与实现「建议收藏」定义word2vec是一种把词转到某种向量空间的方法,在新的向量空间,词之间的相互关系,上下文关系都以某种程度被表征出来。方法词向量的转换方法有两种:CBOW(Continounsbagsofwords)和Skip-gram。以下图示为CBOW的网络结构图上图中的x1,x2,….Xc代表的是源码中的context向量中的每个单词,这个上下文的窗口大小对每个词都是随…

    2022年5月16日
    31
  • BP神经网络的Matlab实现——人工智能算法

    BP神经网络的Matlab实现——人工智能算法这几天在各大媒体上接触到了人工智能机器学习,觉得很有意思,于是开始入门最简单的机器算法——神经网络训练算法(NeuralNetworkTraining);以前一直觉得机器学习很高深,到处是超高等数学、线性代数、数理统计。入坑发现确实是这样!但是呢由项目实例驱动的学习比起为考试不挂科为目的的学习更为高效、实用!在遗传算法、神经网络算法的学习入门之后觉得数学只要用心看没问题的(即使是蒙特卡洛和马尔

    2022年6月10日
    49

发表回复

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

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