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. php搜索分页

    最近做搜索分页的时候,发现第一页显示正常,点击到下一页的时候,显示结果变成了搜索全部内容. 仔细查看代码,发现当第一次输入关键词,提交到查询控制器的时候,表单提交的关键字不为空,可是点击到下一页的时候 ...

  2. mysql同一台服务器上不同数据库中个别表内容同步

    >>>>>>soft_wsx>>>>>>--数据备份与还原>>同步备用服务器--1.完全备份主数据库--2.使用带S ...

  3. 【GoLang】GO语言系列--002.GO语言基础

    002.GO语言基础 1 参考资料 1.1 http://www.cnblogs.com/vimsk/archive/2012/11/03/2736179.html 1.2 https://githu ...

  4. [20160704]Addition program that use JOptionPane for input and output

    //Addition program that use JOptionPane for input and output. import javax.swing.JOptionPane; public ...

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

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

  6. oracle/node-oracledb 数据库驱动 与 Meteor 驱动包!

    oracle/node-oracledb: https://github.com/oracle/node-oracledb   Oracle 官方维护. metstrike/meteor-oracle ...

  7. Linux集群配置ntp时间同步服务

    集群中时间不同步有可能会让大数据的应用程序运行混乱,造成不可预知的问题,比如Hbase,当时间差别过大时就会挂掉,所以在大数据集群中,ntp服务,应该作为一种基础的服务,以下在演示在CentOS 7. ...

  8. 数据结构——二叉查找树、AVL树

    二叉查找树:由于二叉查找树建树的过程即为插入的过程,所以其中序遍历一定为升序排列! 插入:直接插入,插入后一定为根节点 查找:直接查找 删除:叶子节点直接删除,有一个孩子的节点删除后将孩子节点接入到父 ...

  9. Python~if,while,for~顺序,判断,循环

    if A: for -in : while x: if A:elif:else:       不能直接用int进行迭代,而必须加个range.     range(len(L))     int ob ...

  10. Effective C++ -----条款18:让接口容易被正确使用,不易被误用

    好的接口很容易被正确使用,不容易被误用.你应该在你IDE所有接口中努力达成这些性质. “促进正确使用”的办法包括接口的一致性,以及与内置类型的行为兼容. “阻止误用"的办法包括建立新类型.限 ...