返回顶部的三种方法

作者: 提小莫 | 来源:发表于2017-09-13 21:47 被阅读101次

经常遇到页面高度过高,出现滚动条,需要点击返回顶部标签,返回顶部的操作,本文将讲解三种方式供大家参考。

1.锚点返回

<a href="#backToTop">返回顶部</a>

2.简单的JS代码

<a href="javascript:scroll(0,0)">返回顶部</a>

3.动画滚动+返回按钮显示及隐藏(推荐)

① 给按钮设置了背景图更换和过渡

css样式

②html结构

html

③js部分(先引入jq)

js

还是最后献上源码:

百度云盘链接:http://pan.baidu.com/s/1dEICVx3

提取码:34x7


你也可以使用微信查看该文:

雨泽竹米

相关文章

  • 返回页面顶部的几种方式总结

    返回页面顶部的几种方式: 第一种: 实验代码如图: 第二种方式: 返回顶部 实验方法如图: 第三种:可以通过给页面...

  • 返回顶部的三种方法

    经常遇到页面高度过高,出现滚动条,需要点击返回顶部标签,返回顶部的操作,本文将讲解三种方式供大家参考。 1.锚点返...

  • 原生js实现返回顶部功能

    返回顶部的通用方法

  • jQuery返回顶部的方法

    在页面中,当滚动条下滑到一定位置时就会出现返回顶部的图标,点击图标后页面平缓的回到顶部位置。到了顶部,这个图标又会...

  • 返回顶部的几种方法

    有时候网页太长,我们想要回到网页顶部很麻烦。 这时候我们需要一个返回顶部的效果。 要实现返回顶部,有很多方法。 1...

  • Vue与小程序的返回顶部记录

    默认返回顶部按钮是隐藏,滚动一段距离后才显示 VUE 返回顶部 小程序 返回顶部

  • js 返回页面顶部(动画)

    js 返回到页面顶部,含有渐变或者动画效果 点击返回顶部按钮,页面逐渐向上回到顶部: js 返回到页面顶部,直接返...

  • 返回顶部

    function goTop(doc) {var timer = null,current = 0, //当前位置...

  • 返回顶部

    jQuery 原生

  • 返回顶部

网友评论

    本文标题:返回顶部的三种方法

    本文链接:https://www.haomeiwen.com/subject/boglsxtx.html