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 ...
随机推荐
- linux文件远程传输客户端shell脚本与分布式客户机时间同步脚本
#!/bin/bash # 将代码和脚本传送至worker节点 # 改变当前工作目录 cd ${AMAZONCRAWLER_HOME} #读取worker节点ip列表 i= while read li ...
- ubuntu 16.04 挂起后WiFi链接不上
在笔记本上安装ubuntu 16.04后,使用挂起系统功能后发现WIFI链接不上去,然后使用以下指令多WIFI服务进行重启,发觉可以了. sudo service network-manager re ...
- angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)
2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...
- malloc/free与new/delete的区别
相同点:都可用于申请动态内存和释放内存 不同点:(1)操作对象有所不同.malloc与free是C++/C 语言的标准库函数,new/delete 是C++的运算符.对于非内部数据类的对象而言,光用m ...
- Remove Duplicate Letters I & II
Remove Duplicate Letters I Given a string which contains only lowercase letters, remove duplicate le ...
- vs2008与windbg的使用
WinDbg是微软发布的一款相当优秀的源码级(source-level)调试工具,可以用于Kernel模式调试和用户模式调试,还可以调试Dump文件.使用windgb进行程序调试是一个很有必要的技能. ...
- Java集合中List的用法
List接口是Collection接口的子接口,List有一个重要的实现类--ArrayList类,List中的元素是有序排列的而且可重复,所以被称为是序列. List可以精确的控制每个元素的插入位置 ...
- 如何为自己的windows 8系统的电脑更换锁屏壁纸
现在的人都喜欢个性,今天教大家如何设置自己想要的锁屏壁纸 工具/原料 Windows 8系统的笔记本电脑 方法/步骤 将鼠标移到电脑的右下方,点击设置按钮进入设置页面 找到更改电脑设置并点击进 ...
- java web 学习 --第四天(Java三级考试)
第三天的学习内容:http://www.cnblogs.com/tobecrazy/p/3453041.html jsp内置对象 out out 属性类型:JspWriter 作用域:page 作用: ...
- Angular中使用Rainbow
在使用js类库和框架的时候,大家都习惯于编写自己的使用示例,如果能将示例中的html,js和css 进行展示, 并进行高亮显示,效果会很棒,例如在html高亮显示jquery代码 上面的示例是使用ra ...