html css jquery 回到顶部按钮
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试!
CSS部分,很简单就一个class
/*回到顶部*/
.back-top
{
position: fixed;
right: 15px;
bottom: 15px;
z-index:;
font-size: 25px;
width: 40px;
height: 40px;
background-color: #adadad;
color: #ffffff;
cursor: pointer;
border-radius: 2px;
text-align: center;
}
.back-top:hover
{
background-color: #a3a3a3;
}
html部分 也非常简单,一个div, 里面一个图标就可以了.图标我是用奥森图标,大家可以自行更换
<div class="back-top" style="display: none;" title="回到顶部">
<!--此处回到顶部图标自己改-->
<i class="fa fa-angle-double-up"></i>
</div>
jQuery 部分,也非常简单,相关注意点看注释
//回到顶部
$(function () {
if ($(window).width() >= 700) {//本人的项目是响应式的,但是移动端不显示回到顶部,自己可以去掉
$(window).scroll(function () {
if ($(window).scrollTop() <= 200) {
if ($(".back-top").css("display") != "none") {
$(".back-top").slideUp("normal"); //缓慢下降隐藏
}
}
else {
if ($(".back-top").css("display") == "none") {
$(".back-top").slideDown("normal"); //缓慢上升显示
}
}
});
}
});
$(".back-top").click(function () {
$("body").animate({ scrollTop: 0 }, "slow"); //回到顶部
});
html css jquery 回到顶部按钮的更多相关文章
- 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示
1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- jQuery回到顶部
jquery回到顶部 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=& ...
- Angular回到顶部按钮指令
之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> < ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery 回到顶部
转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图) 先来看几个图片 ...
- Jquery回到顶部插件【query.scrollUp.js】使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...
- jQuery回到顶部插件jQuery GoUp
插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...
随机推荐
- 教你用shell写CGI程序
以前用shell写过一些cgi的例子.今天向大家介绍一下. CGI是一种接口的标准,并不区分编程语言,也就是说,CGI可以用任何一种语言编写,只要这种语言具有标准输入.输出和环境变量.CGI会将标准输 ...
- CSS 选择器的学习
从蛋学习 CSS 选择器 + 做一个 Jumony 桌面工具,真费劲,目前Jumony Tool两大问题无法解决,完美的显示 html 文档和根据结果在文档中定位,有点儿跑题了…… 1. 选择“cla ...
- IOS学习之路十九(JSON与Arrays 或者 Dictionaries相互转换)
今天写了个json与Arrays 或者 Dictionaries相互转换的例子很简单: 通过 NSJSONSerialization 这个类的 dataWithJSONObject: options: ...
- Setting up Ubuntu in CoLinux–changing local/keyboard to be English
Today i installed the CoLinux with Ubuntu package, but the default locale setting of the system is G ...
- Easyui表单验证扩展
简介: 使用Easyui,我们省了好多事情,不用为UI费心,只需要关注业务层面即可,下面是一些常用的验证方面的扩展,收藏下自己用 //重载$.fn.validatebox.defaults.rules ...
- jquery选择器之内容过滤选择器
先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...
- MyEclipse取消Show in Breadcrumb的方法
eclipse中的Show in Breadcrumb是快速导航条,可以清晰的看到我们当前的类,属性或方法的导航 定位. 如果不喜欢的话,取消掉的方法如下: Window -> Customiz ...
- 自用类库整理之SqlHelper和MySqlHelper
自用类库整理之SqlHelper和MySqlHelper 自用的SQLHelper和MySqlHelper,除一些通用方法外,封装了一些很实用的批量操作方法,简单介绍下 SqlHelper Execu ...
- 我的Pandas应用场景
声明 工作后,很不幸的成为了团队中的QA.QA这个角色吧,说起来高大上,实际很苦逼,一句话概括一下:吃力不讨好!作为新人,公司每月一分钱没少我,至少现在跟开发的待遇是一样的,所以我还是得兢兢业业的对待 ...
- IOS Objective-C 协议,委托
IOS Objective-C 协议,委托 IOS开发使用的语言Objective-C(以下简称OBJ-C)是一种扩展自C语言的面向对象语言.在OBJ-C中有一个很重要概念:消息.在最近的学习当中逐渐 ...