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

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

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

2、设置其CSS样式:

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

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

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

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop()>300){
$("#return-top").show()
}else{
$("#return-top").hide()
}
})
</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. Vue+element UI实现“回到顶部”按钮组件

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

  4. octopress添加回到顶部按钮

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

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

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

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

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

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

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

  8. H5 回到顶部按钮

    //这里我用的是svg,所以代码老长了,可以把svg部分换成自己的图片什么的$(function(){ var obj = $('<div style="width:1.3rem;po ...

  9. js隐藏与显示回到顶部按钮

    window.onscroll = function () { if (document.documentElement.scrollTop + document.body.scrollTop > ...

随机推荐

  1. postgresql 中replace 函数

    select replace(字段名,E'\r','') from 表名 where 字段名 like E'%\r%';:  查看修改后结果,并不真实修改数据库 update 表名 set 字段名=r ...

  2. 10. JEB1.5 插件编写二

    一些实例 1. 遍历当前光标处函数所有的Element Java代码: import java.io.*; import java.util.List; import jeb.api.IScript; ...

  3. 排序命令sort

    Unix和Linux自带的sort命令功能非常强大,其主要功能是对文本内容按不同的方法排序.它不仅可以按一个或多个字段排序,还可以合并文件.使用sort处理一些较大的文件时,可能处理速度会比较慢,但却 ...

  4. 如何使用 Java8 实现观察者模式?(下)

    [编者按]本文作者是 BAE 系统公司的软件工程师 Justin Albano.在本篇文章中,作者通过在 Java8 环境下实现观察者模式的实例,进一步介绍了什么是观察者模式.专业化及其命名规则,供大 ...

  5. Dvna for Owasp top 10 2017

    简介: DVNA(Damn Vulnerable Node Application),它是一款由Node.js打造的知名WEB漏洞测试平台,或许有些朋友已经使用过.它是用来给使用Node的WEB开发人 ...

  6. Python3列表(list)比较操作教程

    一.相等比较 1.1 同顺序列表比较 顺序相同直接用“==”进行比较即可 list1 = ["one","two","three"] lis ...

  7. 缓存session,cookie,sessionStorage,localStorage的区别

    https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...

  8. 使用select正确处理EOF的str_cli函数

    void str_cli(FILE *fp, int sockfd) { int maxfdp1, stdineof; fd_set rset; char buf[MAXLINE]; int n; s ...

  9. java框架之SpringBoot(15)-安全及整合SpringSecurity

    SpringSecurity介绍 Spring Security 是针对 Spring 项目的安全框架,也是 Spring Boot 底层安全模块默认的技术选型.它可以实现强大的 Web 安全控制.对 ...

  10. 【JMeter】【接口测试】csv参数化,数据驱动,自动化测试

    csv参数化,数据驱动   首先我们要有一个接口测试用例存放的地方,我们这里用EXCEL模板管理,里面包含用例编号.入参.优先级.请求方式.url等等. 1:新建一个txt文件,命名为sjqd,后缀名 ...