$(function(){
$('#goto_top_btn').click(function() {
var s = $(window).scrollTop(),h = $(window).height();
if (s > h * 2) {
$('html, body').scrollTop(0);
} else {
$('html,body').animate({scrollTop: '0px'}, 300);
}
});
});

<div class="fix-layout">
<div id="_returnTop_layout_inner" class="gb-operation-area">
<a id="goto_top_btn" class="gb-operation-button return-top" href="javascript:;">
<i class="gb-operation-icon" title="返回顶部"></i>
<span class="gb-operation-text">顶部</span>
</a>
<a id="" class="gb-operation-button report" href="javascript:;" style="display: block;">
<i class="gb-operation-icon" title="举报"></i>
<span class="gb-operation-text">举报</span>
</a>
</div>
</div>

JQ_返回顶部的更多相关文章

  1. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  2. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  3. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

  4. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  5. js返回顶部效果

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

  6. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  7. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  8. jquery返回顶部,支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  9. 网页返回顶部之animate方法

    点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...

随机推荐

  1. English Phonetic Spelling Alphabet

    https://www.englishclub.com/vocabulary/english-phonetic-spelling.htm When speaking on the telephone ...

  2. django模板系统(下)

    主要内容:母版,继承母版,块,组件,静态文件 母版 <!DOCTYPE html> <html lang="en"> <head> <me ...

  3. beta阶段学习博客(一) js交互

    js交互 js交互的三种方法

  4. 常用npm 命令

    npm 官方网站:npm的使用说明   安装模块 npm install 安装当前目录package.json文件中配置的dependencies模块   安装本地的模块文件 npm install ...

  5. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  6. libco协程库上下文切换原理详解

    缘起 libco 协程库在单个线程中实现了多个协程的创建和切换.按照我们通常的编程思路,单个线程中的程序执行流程通常是顺序的,调用函数同样也是 “调用——返回”,每次都是从函数的入口处开始执行.而li ...

  7. 同一域环境下SQLServer DB Failover故障转移配置详解

    前 言:    很多情况下,虽然我们的站点.APIService.Redis等已经做成了分布式架构,但是SQLServer依然还是单体结构,当出现网络异常.服务器宕机时便存在极大的风险,这时候我们需要 ...

  8. myEtherWallet在线钱包的使用

    https://www.myetherwallet.com/#generate-wallet myEtherWallet是一款在线钱包,当你不想安装类似metamask这样的插件时,可以选择使用它 1 ...

  9. webservice 客户端调用

    /** * 通过webserevice下发工单 * @param url * @param method * @param requestMap * @return * @throws Service ...

  10. shiro实战系列(十二)之常用专业术语

    请花 2 分钟来阅读和理解它——这很重要.真的.这里的术语和概念在文档的任何地方都被涉及到,它将在总体上 大大简化你对 Shiro 和安全的理解.   由于所使用的术语使得安全可能令人困惑.我们将通过 ...