1、首先,我们要准备HTML代码:

  1. <div id="return-top">
  2. <a href="#top">返回顶部</a>
  3. </div>

这里的<a>标签里面的href=“#top”就表示点击它就可以回到顶部,就不写回到顶部的代码了

2、设置其CSS样式:

  1. #return-top{
  2. width: 50px;
  3. height: 50px;
  4. background-color: #8FBC8F;/*背景颜色*/
  5. color: white;/*字体颜色*/
  6. position: fixed;/*固定按钮的位置,不随页面滚动*/
  7. bottom: 40px;/*距离浏览器窗口底部的距离*/
  8. right: 40px;/*距离浏览器窗口最右侧的距离*/
  9. text-align: center;
       display:none;/*重点!我们打开页面时不需要看到这个按钮,设置为不显示*/
  10. }
    #return-top a{
      color:white;
      text-decoration:none;/*不要下划线*/
      line-height:20px;/*行高*/
      display:block;/*不使用这个属性的话,文字对不齐。。。具体原因我没了解过*/
      margin:5px;/*元素四周的外边距为5像素,加上行高*2(因为有两行),刚好是50px(div的高)*/
    }

一顿胡乱操作之后,“返回顶部”按钮就有了如下这个外观:,还怪好看的(不是

3、重点来了,jQuery代码部分:

  1. <script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
  2. $(window).scroll(function(){
  3. if($(this).scrollTop()>300){
  4. $("#return-top").show()
  5. }else{
  6. $("#return-top").hide()
  7. }
  8. })
  9. </script>

解释一下:首先我们要做的功能是:用户打开网页,看不到按钮,滚动到了离页面顶端较远的地方,按钮自己出来了,点击按钮回到顶部,按钮又消失了

代码思路:当浏览器的滚动条靠近顶端的时候,“回到顶部”按钮始终隐藏(包括刚打开网页的时候,设置display:none),使用hide()方法;

     当滚动条位置有了变化,触发浏览器窗口的滚动事件(scroll()方法),当滚动条位置距离初始位置大于一定数值(像素值)时,按钮显示(show()方法)

提示:使用jQuery代码,要先引入js文件哦哦!

我是个编程小白,如果路过的网友有看了我写的内容很想打(指导)我的地方,可以告诉我啦啦啦^_^

题外话:想问下“^”这个符号你们怎么念的啊。。。。

简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示的更多相关文章

  1. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  2. Angular回到顶部按钮指令

    之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> < ...

  3. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...

  4. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  5. Vue+element UI实现“回到顶部”按钮组件

    介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...

  6. octopress添加回到顶部按钮

    准备回到顶部的png图片一枚,可以随自己喜好google.分享我的 取名top.png,保存在octopress/source/images/top.png octopress/source/_inc ...

  7. jQuery实现“回到顶部”按钮功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 微信小程序中两种回到顶部按钮的效果实现

    一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...

  9. back to top 回到顶部按钮 css+js

    效果 html <p id="back-to-top"><a href="#top"><span></span> ...

随机推荐

  1. eclipse maven 构建简单springmvc项目

    环境:eclipse Version: Oxygen.3a Release (4.7.3a) 创建maven Project项目,目录结构 修改工程的相关编译属性 修改pop.xml,引入spring ...

  2. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  3. 使用 Swoole 来加速你的 Laravel 应用

    Swoole 是为 PHP 开发的生产级异步编程框架. 他是一个纯 C 开发的扩展, 他允许 PHP 开发者在 PHP 中写 高性能,可扩展的并发 TCP, UDP, Unix socket, HTT ...

  4. mac下nginx安装

    一.安装 Nginx 终端执行: brew search nginx brew install nginx 当前版本 1.10.2,通过brew可以把nginx需要的pcre,openssl,zlib ...

  5. Spring Boot全局支持CORS(跨源请求)的配置方法

    http://blog.csdn.net/zhangchao19890805/article/details/53893735

  6. 【转】拍拍网2015年mysql最新开发规范

    1.命名规范 (1)库名.表名.字段名必须使用小写字母,并采用下划线分割. (2)库名.表名.字段名禁止超过32个字符. (3)库名.表名.字段名必须见名知意.命名与业务.产品线等相关联. (4)库名 ...

  7. RestTemplate 微信接口 text/plain HttpMessageConverter

    一.背景介绍 使用 Spring Boot 写项目,需要用到微信接口获取用户信息. 在 Jessey 和 Spring RestTemplate 两个 Rest 客户端中,想到尽量不引入更多的东西,然 ...

  8. javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

  9. dnscache --源码笔记

    ) } } //通过net包 解析域名对应的ip集合 func (r *Resolver) Lookup(address string) ([]net.IP, error) { ips, err := ...

  10. BZOJ_4867_[Ynoi2017]舌尖上的由乃_分块+dfs序

    BZOJ_4867_[Ynoi2017]舌尖上的由乃_分块+dfs序 Description 由乃为了吃到最传统最纯净的美食,决定亲自开垦一片菜园.现有一片空地,由乃已经规划n个地点准备种上蔬菜.最新 ...