jquery配合css简单实现返回顶部效果

CSS：


代码如下:

.backToTop {
display: none;
width: 18px;
line-height: 1.2;
padding: 5px 0;
background-color: #000;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}

jQuery代码


代码如下:

(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); }); })();：

赞 (0)

相关推荐

  • 用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 复制代码 代码如下: <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p> JS代码: <script type="text/javascript" src="js/jquery-1.7.2.min.js"&g

  • Android实战教程第十篇仿腾讯手机助手小火箭发射效果

    Android实战教程第十篇仿腾讯手机助手小火箭发射效果

    之前对系统自带的土司的源码做了简要分析,见博客:点击打开链接 这一篇给一个小案例,自定义土司,模拟腾讯卫士的小火箭发射.如果想要迅速看懂代码,建议先去看一下上篇介绍点击打开链接 首先,定义一个服务,在这个服务里面,完成土司的创建(小火箭布局创建),烟的效果属于动画播放,而且要依托一个activity.(这个activity要定义为透明状态) 定义烟的activity的布局文件 <?xml version="1.0" encoding="utf-8"?>

  • 常见效果实现之返回顶部(结合淡入、淡出、减速滚动)

    在性能方面考虑了由于连续触发onscroll事件,频繁调用回调函数而产生的性能问题.可以将回调函数缓存一段时候后执行,即当这段时间内多次触发了onscroll事件,但回调函数只会执行一次. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>结合淡入/淡出/减速运动效果实现的返回顶部功能</title> <styl

  • 基于jquery的返回顶部效果（兼容IE6）

    最近也在学jquery,就顺便记录一下了. HTML 复制代码 代码如下: <div class="scroll"></div> <script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script> <script type="text/javascript&qu

  • ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果

    要实现该效果,首先要先了解以下几点基础知识: 窗体滚动事件:$(window).scroll(function(){...}); 获取窗体滚动距离:$(window).scrollTop(); 获取窗体高度:$(window).height(); 了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了. 1.准备界面结构代码: 复制代码 代码如下: <form id="form1" runat="server"> <div> &

  • Android中SwipeBack实现右滑返回效果

    Android中SwipeBack实现右滑返回效果

    现在有很多App支持右滑返回,比如知乎,效果比较赞. 于是自己对Activity和Fragment进行了继承,派生出SwipeBackActivity和SwipeBackFragment,用于对这种效果的实现,也就是只要继承这两个类就可以了. 效果如下 Activity Fragment Frgament的效果实现比Activity稍微简单,因为Activity要考虑到dectorView. 支持滑动的控件SwipeLayout,核心思路就是把原有的控件添加到支持滑动的控件中,SwipeLayo

  • Android实现定制返回按钮动画效果的方法

    Android实现定制返回按钮动画效果的方法

    今天我们来讲一讲Andorid中如何定制返回按钮的动画效果.我将结合实际应用来阐述如何使用. 首先来看一个效果截图,有一个搜索按钮在一个页面的顶部: 我之前实现的方式是和百度/Google首页搜索的效果一样的,类似web开发中的ajax请求,结果直接在当前页面显示出来(下拉效果).后来参考了众多APP之后发现都是进入到一个新的页面,所以我也就改过来试试..废话说多了.. 那我们点击了搜索框之后呢,会进入到一个新的activity,这里的动画效果很简单,直接使用overridePendingTra

  • javascript返回顶部效果(自写代码)

    现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &

  • jquery小火箭返回顶部代码分享

    jquery小火箭返回顶部代码分享

    这是一款基于jquery小火箭返回顶部特效源码,解决了页面太长造成的用户返回页面顶端困难. 为大家分享的jquery小火箭返回顶部代码如下 <head> <title>jquery小火箭返回顶部代码</title> <link href="css/top.css" rel="stylesheet" type="text/css"/> </head> <body style=&quo

  • js简单的点击返回顶部效果实现方法

    本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部. 要点一:document.documentElement.clientWidth || docum

随机推荐