<style>
/*默认样式,主要是position:fixed实现屏幕绝对定位*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}
/*用CSS表达式(expression)来实现ie6下position:fixed效果*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}
/*鼠标进入的反馈效果*/
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}
</style>
<script>
function gotoTop(min_height){
//预定义返回顶部的html代码,它的css样式默认为不显示
var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
//将返回顶部的html代码插入页面上id为page的元素的末尾
$(".clearer").append(gotoTop_html);
$("#gotoTop").click(//定义返回顶部点击向上滚动的动画
function(){$('html,body').animate({scrollTop:0},700);
}).hover(//为返回顶部增加鼠标进入的反馈效果,用添加删除css类实现
function(){$(this).addClass("hover");},
function(){$(this).removeClass("hover");
});
//获取页面的最小高度,无传入值则默认为600像素
min_height ? min_height = min_height : min_height = 600;
//为窗口的scroll事件绑定处理函数
$(window).scroll(function(){
//获取窗口的滚动条的垂直位置
var s = $(window).scrollTop();
//当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐
if( s > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
};
});
};
$(document).ready(function(){
gotoTop();
}); </script>

其中

 $(".clearer")
为页面的中的一个元素

jquery方法回到顶部代码的更多相关文章

  1. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  2. 兼容IE,chrome 等所有浏览器 回到顶部代码

    今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...

  3. 用Jquery写返回顶部代码

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...

  4. 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  5. listView从底部回到顶部代码实现

    可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...

  6. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  7. jQuery实现“回到顶部”按钮功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery之回到顶部

    实现回到顶部的功能,根据学了元素滚动实现,温习知识点. 做之前先理清一下步骤和思路: 1.获得页面的滚动长度 var $page = $("html,body"); var dis ...

  9. 使用 jQuery 页面回到顶部

    function backTop() { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#t ...

随机推荐

  1. TCP/IP详解学习笔记(1)-- 概述

    1.TCP/IP的分层结构      网络协议通常分不同层次进行开发,每一层分别负责不同的同信功能.TCP/IP通常被认为是一个四层协议系统.      如图所示.       1)链路层(数据链路层 ...

  2. MongoDB 1: NoSQL 和 SQL的区别

    导读:本篇博客,主要是结合自己在项目中的使用,简单的阐述一下NoSQL和SQL的区别.那么,根据自己的应用,NoSQL这边,选择的是MongoDB(Redis虽然也是,但属于内存存储,这里不予说明). ...

  3. express 框架初步体验

    一. 安装express 1.打开cmd  全局安装express 输入:npm install -gd express 2. 安装命令行工具,不然你输入express 会出现 不是内部命令. 输入: ...

  4. chrome浏览器设置小于12号的字体不起作用?

    在某些chrome浏览器下,css里设置的10号字体竟然不起作用!仍显示12号大小,对比firefox.ie6.7.8.9,他们的显示都是好的. 要是你也碰到这问题,可以这样解决: -webkit-t ...

  5. 深入浅出 RPC - 浅出篇+深入篇

    摘自: http://blog.csdn.net/mindfloating/article/details/39473807 近几年的项目中,服务化和微服务化渐渐成为中大型分布式系统架构的主流方式,而 ...

  6. Android TestView文本文字修改实例

    这里我们给大家总结了下关于Android TextView文本文字的常用两种应用,一种是像我们使用微信会看到长文件是可以折叠显示了,还有一种就是TextView文字颜色TextColor焦点效果,下面 ...

  7. Python-2.7.11+Django-1.9.4安装配置

    1.去python官网下载2.7的最新版本 https://www.python.org/downloads 1.1 解压Python-2.7.11.tgz tar xvf Python-2.7.11 ...

  8. IOS 支付功能的实现

    支付宝是第三方支付平台,简单来说就是协调客户,商户,银行三者关系的方便平台 使用支付宝进行一个完整的支付功能,大致有以下步骤: a 与支付宝进行签约,获得商户ID(partner)和账号ID(sell ...

  9. 在mac系统上安装Eclipse,编写java程序

    第一步:安装java jre(java 运行环境). 如图所示: 登陆Oralce官网,点击Download选项,找到如图所示界面: 选择Java Runtime Environment(JRE),打 ...

  10. SQLServer存储过程入门

    1.创建一个返回结果集的存储过程 create procedure firstpro As begin select * from dbo.Person End 执行: execute dbo.fir ...