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. apache virtualhost 针对ip开放访问

    http://serverfault.com/questions/246003/apache-httpd-how-can-i-deny-from-all-allow-from-subnet-but-d ...

  2. apache2错误日志在哪,可以看到php错误

    在以下路径中 /var/log/apache2/error.log

  3. CentOS用yum安装、配置MariaDB

    .创建/etc/yum.repos.d/MariaDB.repo文件,这里用到了刚刚发布正式版的10. [mariadb] name = MariaDB baseurl = http://yum.ma ...

  4. 蓝牙模块连接后出现ANR,日志记录

    11-25 16:29:48.433 14507-14561/myapplication.com.myblue W/MALI: glDrawArrays:714: [MALI] glDrawArray ...

  5. ubuntu14.04安装django

    1) sudo apt-get install python-pip#安装pip 2) pip install Django==1.8.1

  6. 套接字IO超时设置和使用select实现超时管理

    在涉及套接字IO超时的设置上有一下3种方法: 1.调用alarm,它在指定的时期满时产生SIGALRM信号.这个方法涉及信号的处理,而信号处理在不同的实现上存在差异,而且可能干扰进程中现有的alarm ...

  7. 【leetcode】Restore IP Addresses

    Restore IP Addresses Given a string containing only digits, restore it by returning all possible val ...

  8. python之errno

    http://www.cnblogs.com/Security-Darren/p/4168392.html errno.EWOULDBLOCK 操作将会阻塞

  9. 【leetcode】Remove Linked List Elements(easy)

    Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...

  10. window.parent 与 window.opener

    window.parent针对iframe,window.opener针对window.open 父页面parent.jsp: <%@ page language="java" ...