HTML页面实现返回顶部效果 go to top
1、首先导入jQuery插件。
2、js代码:
$(window).scroll(function () {
if($(window).scrollTop()>=100) {
$(".backtop").fadeIn();
}else {
$(".backtop").fadeOut();
}
});
$(".backtop").click(function(event){
$('html,body').animate({scrollTop:0}, 500);
return false;
});
3、css代码:
a.backtop {
background: url("./sw/images/backtotop.png") no-repeat scroll center center rgba(0, 0, 0, 0);
bottom: 20px;
cursor: pointer;
display: none;
height: 70px;
position: fixed;
right: 20px;
text-indent: -9999px;
width: 70px;
z-index:;
}
4、页面代码:
<a class="backtop" >
<h6>返回顶部啊</h6>
</a>
HTML页面实现返回顶部效果 go to top的更多相关文章
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- WEB返回顶部效果
1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...
- JavaScript实现返回顶部效果
仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...
- jq-animate实现返回顶部效果
jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 简约的返回顶部效果(jQuery)
博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...
- jQuery 返回顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web前端 页面功能——点击按钮返回顶部的实现方法
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- css 简单 返回顶部 代码及注释说明
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
随机推荐
- div里包含img底部必定多出空白的解决办法
研究了很久,自己写了js代码都解决不了.最后还是靠万能的网友解决了这一问题! 问题:adding.margin.border都设为0,无效.怎么样都多出3px. 解决方案: 1.设置div{ font ...
- 2.2---找链表倒数第K个结点
答案,注意,一种是递归,另一种是迭代,那么巧妙利用双指针: 迭代: public static LinkedListNode nthToLast(LinkedListNode head, int n) ...
- 【GoLang】golang 报管理工具 Godep 介绍
使用方法: 提交:cd ${GOPATH}/src/github.com/junneyang/xcloudgodep save -v ./...rm -rf vendor/git checkout - ...
- C# 毕业证书打印《五》
对鼠标操作Label的方法 #region //定义一个枚举类型,描述光标状态 private enum EnumMousePointPosition { #region MouseSizeNone ...
- RRD
http://my.oschina.net/u/1458120/blog/208857
- 自动化运维工具ansible学习+使用ansible批量推送公钥到远程主机
目录: 一.ansible简介 1.1.ansible是什么 1.2.ansible如何工作 1.3.ansible优缺点 1.4.ansible安装方式 1.5.ansible文件简单介绍 1.6. ...
- Delphi中Format与FormatDateTime函数详解
copy:http://hi.baidu.com/yunfanleo/blog/item/0c51d9cdbc0531550eb34558.html Format是一个很常用,却又似乎很烦的方法,本人 ...
- modelsim do文件仿真
1.编写sim.do文件 ##### Quit the Simulation ##### quit -sim ##### Make work directory && Create ...
- Binary String Matching
问题 B: Binary String Matching 时间限制: 3 Sec 内存限制: 128 MB提交: 4 解决: 2[提交][状态][讨论版] 题目描述 Given two strin ...
- codeforces 505A. Mr. Kitayuta's Gift 解题报告
题目链接:http://codeforces.com/problemset/problem/505/A 题目意思:给出一个长度不大于10的小写英文字符串 s,问是否能通过在字符串的某个位置插入一个字母 ...