基于jquery的回到页面顶部按钮

css代码：


代码如下:

.scroll-up {
background: #dcdcdc url('up.png') no-repeat center center;
width:48px !important; /*for ff and other standard browser*/
height:48px !important;
_width: 58px; /*for IE6 nonstandard box model*/
_height: 58px;
position: fixed;
_position: absolute; /*for IE6 fixed bug*/
opacity: .6;
filter: Alpha(opacity=60); /*for IE opacity*/
padding:5px;
cursor: pointer;
display: none;
/*css3 property for ff chrome*/
border-radius:5px;
-webkit-transition-property: background-color, opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;
-moz-transition-property: background-color;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease;
}
.scroll-up:hover {
background-color:#B9B9B9;
opacity: .8;
}

下面是jquery代码


代码如下:

;(function($) {
$.scrollBtn = function(options) {
var opts = $.extend({}, $.scrollBtn.defaults, options);
var $scrollBtn = $('<DIV></DIV>').css({
bottom: opts.bottom + 'px',
right: opts.right + 'px'
}).addClass('scroll-up').attr('title', opts.title)
.click(function() {
$('html, body').animate({scrollTop: 0}, opts.duration);
}).appendTo('body');
// 绑定到window的scroll事件
$(window).bind('scroll', function() {
var scrollTop = $(document).scrollTop(),
viewHeight = $(window).height();
// 小于配置的显示范围 则fadeOut
if(scrollTop <= opts.showScale) {
if($scrollBtn.is(':visible'))
$scrollBtn.fadeOut(500);
// 大于配置的显示范围 则fadeIn
} else {
if($scrollBtn.is(':hidden'))
$scrollBtn.fadeIn(500);
}
// 解决IE6下css中fixed没有效果的bug
if(isIE6()) {
var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom;
$scrollBtn.css('top', top + 'px');
}
});
// 判断是否为IE6
function isIE6() {
if($.browser.msie) {
if($.browser.version == '6.0') return true;
}
}
};
/**
* -params
* -showScale: scroll down how much to show the scrollup button
* -right: to right of scrollable container
* -bottom: to bottom of scrollable container
*/
$.scrollBtn.defaults = { // 默认值
showScale: 100, // 超过100px 显示按钮
right:10,
bottom:10,
duration:200, // 回到页面顶部的时间间隔
title:'back to top' // div的title属性
}
})(jQuery);
$.scrollBtn({
showScale: 200, //下滚200px后 显示按钮
bottom:20, // 靠底部20px
right:20 // 靠右部20px
});

backToTop.rar

赞 (0)

相关推荐

  • jQuery实现分章节锚点“回到顶部”动画特效代码

    jQuery实现分章节锚点“回到顶部”动画特效代码

    本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

  • jquery网页回到顶部效果(图标渐隐,自写)

    唔,进来开发需求,当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,而不是自己去滚滑轮~ 原本以为比较难的说,因为上头要求全部用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就尝试写了下,唔,没发现,还挺easy的说~~ 有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~ 复制代码 代码如下: <pre name="code" class="javascript">//回到顶部js $(function(){ v

  • jQuery回到顶部的代码

    jQuery回到顶部的代码

    在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果.感兴趣的朋友跟着小编一起看下实现代码吧. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top">

  • jquery实现的动态回到顶部特效代码

    jquery实现的动态回到顶部特效代码

    本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

  • JQuery点击事件回到页面顶部效果的实现代码

    JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <script type="text/javascript"> $(function(){ $("#top&quo

  • jQuery实现带有动画效果的回到顶部和底部代码

    jQuery实现带有动画效果的回到顶部和底部代码

    本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

  • jquery实现跳到底部，回到顶部效果的简单实例(类似锚)

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • 基于jquery的回到页面顶部按钮

    css代码: 复制代码 代码如下: .scroll-up { background: #dcdcdc url('up.png') no-repeat center center; width:48px !important; /*for ff and other standard browser*/ height:48px !important; _width: 58px; /*for IE6 nonstandard box model*/ _height: 58px; position: fi

  • 基于JavaScript实现回到页面顶部动画代码

    最近做的都是前端的项目,很多项目都有回到顶部的需求,下面把我写js代码做个笔录,方便以后查找. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeigh

  • 基于JS实现回到页面顶部的五种写法(从实现到增强)

    写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style=&qu

  • JS实现回到页面顶部动画效果的简单实例

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight

  • 自己动手制作基于jQuery的Web页面加载进度条插件

    静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

  • 基于jquery实现点击左右按钮图片横向滚动

    基于jquery实现点击左右按钮图片横向滚动

    点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margi

  • 基于jquery的让页面控件不可用的实现代码

    应用背景 当用户需要某项功能时要填写一些表单信息,在填写完成并提交后,该部分信息是不允许再次修改的.表单包含TextBox.DropDownList.CheckBox等控件. 需求实现 第一种方案,绑定用户填写的数据时,设置控件的Enable属性为False.如果页面的表单数较少时可采用这样的方法,但是如果在表单较多的情况下则并不是更好的方法. 第二种方案,使用Foreach访问页面控件,判断类型如果是TextBox.DropDownList.CheckBox等,则设置Enable=False.

  • 基于jQuery实现模拟页面加载进度条

    基于jQuery实现模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7

  • 基于jquery的设置页面文本框 只能输入数字的实现代码

    代码如下: 复制代码 代码如下: $("#money").bind("propertychange",function() { if(""!=this.value){ var str = this.value.replace(/(^\s*)|(\s*$)/g, ""); if(this.value != str ) this.value = str; } if( isNaN(Number(this.value))) this.

随机推荐