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. Ubuntu固定ip和dns配置和查看

    1.查看dns: cat /etc/resolv.conf 2.Ubuntu固定ip sudo vim /etc/network/interfaces 修改如下部分: auto p3p1 iface ...

  2. 将 JAR 转为 EXE – JSMOOTH 的使用教程(第二期)(转载)

    http://www.iteknical.com/convert-jar-to-exe-phase-ii-jsmooth-use-tutorial/

  3. EOS/普元:概述:中国IT业的悲哀

    公司引入了普元的EOS作为公司的基础架构平台,今后的所有项目将逐步向EOS的迁移,但对EOS的研究又让我不得不说出以下话: 1.EOS确实够简单,但未免简单过了头:从语言层面看EOS 因为EOS将成为 ...

  4. jQuery清除文本框,内容并设置不可用

    JQuery清除文本框,内容并设置不可用  如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...

  5. One Edit Distance

    Given two strings S and T, determine if they are both one edit distance apart. 分析:https://segmentfau ...

  6. Qt不同类之间信号槽连接

    1.类必须继承QObject. #ifndef TESTA_H #define TESTA_H #include <QObject> class TestA : public QObjec ...

  7. Java for LeetCode 216 Combination Sum III

    Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...

  8. python(pyqt)开发环境搭建

    eric+pyqt 安装(python开发工具) 更多 0 Python python Eric是一个开源的.跨平台的python&ruby集成开发环境,基于python和pyqt运行.eri ...

  9. ABAP 数值类型转换

    CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT'       EXPORTING         input  = wa_zz-werks       IMPOR ...

  10. 用基础动画实现iOS控件循环旋转

    - (void)viewDidLoad { [super viewDidLoad]; UIButton* ag=[[UIButton alloc]initWithFrame:CGRectMake(sc ...