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的更多相关文章

  1. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  2. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  3. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  4. jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...

  5. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  6. 简约的返回顶部效果(jQuery)

    博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...

  7. jQuery 返回顶部效果

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

  8. Web前端 页面功能——点击按钮返回顶部的实现方法

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

  9. css 简单 返回顶部 代码及注释说明

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

随机推荐

  1. 报错:No package erlang available

    问题 yum install erlang 报错:No package erlang available 同样的,如果我们在安装nginx的时候出现"No package nginx ava ...

  2. 通过Nginx和Nginx Plus阻止DDoS攻击

    分布式拒绝服务攻击(DDoS)指的是通过多台机器向一个服务或者网站发送大量看似合法的数据包使其网络阻塞.资源耗尽从而不能为正常用户提供正常服务的攻击手段.随着互联网带宽的增加和相关工具的不断发布,这种 ...

  3. ubuntu14.04 server安装gnome-desktop

    You can install the default Ubuntu desktop by executing the following: sudo apt-get install ubuntu-d ...

  4. 解决Django发送中文邮件时的编码及乱码问题

    参考自---http://blog.csdn.net/clh604/article/details/9274793 #-*- coding=utf8 -*- from email.message im ...

  5. Unity3d UGUI序列帧动画

    代码 using UnityEngine; using System.Collections; using System.Collections.Generic; using UnityEngine. ...

  6. ios 使用xib时,在UIScrollView中添建内容view时,使用约束的注意

    请参与一下链接:http://segmentfault.com/a/1190000002462033 简单的说下,就是必须写满一个view的6个约束,就是上下左右高宽,让scrollview 能够根据 ...

  7. java压缩

    /* @description:压缩文件操作 * @param filePath 要压缩的文件路径 * @param descDir 压缩文件保存的路径 d:\\aaa.zip */ public s ...

  8. 如何让ListView的item不可点击

    原文链接:http://blog.csdn.net/zhangfei_jiayou/article/details/6972752 1. 如果是listView的id是使用系统默认的id,如下, 则可 ...

  9. 【leetcode】Swap Nodes in Pairs (middle)

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  10. win7下安装openpyxl

    想使用python来操作Excel,看资料据说openpyxl非常好用,于是到https://pypi.python.org/pypi/openpyxl下载了安装包.下面就来说说安装步骤,也算是对自己 ...