文档章节

简单的返回顶部效果

x360
 x360
发布于 2015/03/17 17:20
字数 457
阅读 69
收藏 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">

<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="en">

<head>

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

 <title>js</title>

</head>

<body>

<style type="text/css">

.back{display:none;width:48px;line-height:1.2;padding:5px 0;background-color:#000;color:#fff;font-size:12px;text-align: center;position:fixed;right:10px;bottom:100px;cursor:pointer;opacity:0.6;filter:Alpha(opacity=60);}

</style>

<script type="text/javascript" src="
http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script
>

<script type="text/javascript">

$(document).ready(function(){

$('<div>TOP</div>').appendTo($("body")) 

$(".back").click(function(){

 $("html,body").animate({scrollTop:0}, 1100);

})

$(window).scroll(function (){

 $(document).scrollTop()> 0? $(".back").fadeIn(500): $(".back").fadeOut(500); 

})

})

</script>

<p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p><p>往下拉,才会出来</p>

</body>

</html>

© 著作权归作者所有

x360
粉丝 2
博文 3
码字总数 1295
作品 0
长宁
网页/平面设计
私信 提问
简单返回顶部代码及注释说明

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 返回顶部 方法二:操作scrooll函数用...

lovethe51cto
2015/08/12
0
0
jQuery:1.[1-2],jQuery基础学习(一)

ylbtech-jQuery:jQuery学习 jQuery语法实例 $(this).hide() jQuery 的 hide() 函数,隐藏当前的 HTML 元素。 $("p").hide() jQuery 的 hide() 函数,隐藏所有 元素。 $(".test").hide() jQue......

吞吞吐吐的
2017/10/18
0
0
javascript滑动回到顶部

对于版面较长的网页,在底部会放上返回顶部的锚点链接,做法也很简单,直接用HTML就能实现,不过这种效果不交呆板,原因就是向上移动很突然,经常会让用户产生莫名的感觉,本文结合JS将实现一...

Minho
2011/08/09
1K
1
【Android】商品详情页实现

我告诉自己,要独立,要坚强,要勇敢,要活的漂亮,要让自己永远善良。 现今的市场说O2O模式很火一点都不假,例如电商,各行各业都在做电商。而做电商平台必不可少的是商品详情页,那么如何实...

zrunker
2017/10/25
0
0
tornado总结4-html模板使用2

参考地址 http://www.tornadoweb.org/en/stable/guide/templates.html?highlight=render#ui-modules 目的说明 osc的所有页面顶部都有这个导航条, 我们可以使用tornado的UI modules来实现导航...

能东棍
2016/05/08
369
0

没有更多内容

加载失败,请刷新页面

加载更多

从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
4
0
程序性能checklist

程序性能checklist

Moks角木
昨天
6
0
VUE 计算属性

本文转载于:专业的前端网站▶VUE 计算属性 1、示例代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </hea......

前端老手
昨天
5
0
快速搭建LNMT平台和环境部署 Tomcat详解

Tomcat部署的基本概念 1. CATALINA_HOME与CATALINA_BASE分别指什么?     CATALINA_HOME指的是Tomcat的安装目录     bin:\\Tomcat一些脚本存放目录,比如启动脚本startup.bat/start...

网络小虾米
昨天
6
0
float浮动

float浮动 float浮动概念及原理: 文档流:文档流是文档中可显示对象在排列时所占用的位置。 加浮动的元素,会脱离文档流,会沿父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动...

studywin
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部