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. wamp2.5版本64位403forbidden问题

    使用最新版wamp集成环境的时候,在主机上可以访问localhost,外网访问时遇到了403错误.如下: 这是由于新版wamp默认配置比较严格,出于安全和性能的考虑,这么做是可以理解的. 解决方法为: ...

  2. JavaWeb出现404一个很隐蔽的原因

  3. Tomcat启动服务报错:Unknown version string [3.1]. Default version will be used.

    用Intellij IDEA 部署Web项目,Tomcat启动后报错Unknown version string [3.1]. Default version will be used. 作者的问题出 ...

  4. vmware-question

    1.网卡修改序号ip link set eth3 name eth02.解决克隆虚拟机后网卡设备无法识别启动问题的方法******************************/etc/udev/r ...

  5. git rebase简介(高级篇)

    原文:http://gitbook.liuhui998.com/4_3.html 一.基本   对于git rebase,你亦可以选择进行交互式的rebase.这种方法通常用于在向别处推送提交之前对它 ...

  6. jq鼠标隐藏显示的方法

    <div style="width:300px; float:left;">        <div onmouseover="testOnmouseO ...

  7. FileUpload1上传控件

    <asp:FileUpload ID="FileUpload1" runat="server" /> string fn = System.IO.P ...

  8. sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback

    sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...

  9. 【leetcode】Integer to Roman

    Integer to Roman Given an integer, convert it to a roman numeral. Input is guaranteed to be within t ...

  10. linux学习之-vsftp

    一.简介 vsftp是一个基于GPL发布的类unix系统上使用的ftp服务器软件,它的全称是very secure FTP ,软件的编写初衷是为了代码的安全,另外高速与高稳定性也是vsftp的两个重要 ...