乌徒帮技术范儿WEB开发jQuery › jquery实现点击按钮上下快速滚动网页返回网页顶部

jquery实现点击按钮上下快速滚动网页返回网页顶部

分类:jQuery

经过今天的研究乌徒帮上下快速返回滚动按钮已经上线,网友只要网网页右下角看,就能看到快速滚动按钮,实现wordpress快速评价回复等。该方法非常完美华丽的实现了点击按钮返回网页顶部的功能。该按钮是通过jquery实现,并解决了在IE6下不能漂浮的问题。本代码拥有以下功能和特点:

1、点击向上按钮,快速回到顶部;
2、点击向下按钮,快速回到底部;
3、在文章页、页面页,点击回复按钮,快速滑到评论;
4、双击屏幕,慢速向下滚动屏幕。

解决IE早版本下不能正常悬浮在右下角的效果;
用户可以自己更改代码,实现自己的效果。

这里需要对如何修改进行说明:本代码有三个jquery的javascript代码文件,唯一可以修改的是javascript.js,修改其中的

//返回页首
$('a#back-to-top').click(function(){
? $('html, body').animate({scrollTop: 0}, {duration:1200, easing:'easeInOutSine'});
? return false;
});
$('a#back-to-bottom').click(function(){
? $('html, body').scrollTo( '#footer', 1200, {easing:'easeInOutSine'} );
? return false;
});
$('a#go-to-message').click(function(){
? $('html, body').scrollTo( '#respond', 1200, {easing:'easeInOutSine'} );
? return false;
});

中对应的#,可以修改为.(即class),这个#即对应你要跳转到的位置,如你在html中间放入一个<div id=thisbody>那么这里修改为a#thisbody即可。

原始代码(可以修改作为插件),切勿修改style:

<style>
/*Scroll*/
body{
background-image:url(text.txt);
background-attachment:fixed;
}
#scroll {
clear:both; width:20px; height:120px;position:fixed;bottom:30px;left:50%; margin:0 0 0 560px; z-index:99;
_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
}
#scroll a { background:url(http://static.utubon.com/wp-content/themes/secondary/images/scroll.png) no-repeat; float:left; display:inline; text-indent:-10000px; width:20px; height:40px; outline:none; border:none; }
#scroll a.back-to-top { background-position:left top; }
#scroll a.back-to-top:hover { background-position:right top; }
#scroll a.go-to-message { background-position:left center; }
#scroll a.go-to-message:hover { background-position:right center; }
#scroll a.back-to-bottom { background-position:left bottom; }
#scroll a.back-to-bottom:hover { background-position:right bottom; }
</style>
<div id="scroll"><a href="#top" title="回到页首" id="back-to-top">回到页首</a><a href="#commet" title="留言评论" id="go-to-message">留言评论</a><a href="#bottom" title="回到页尾" id="back-to-bottom">回到页尾</a></div>
<script type="text/javascript" src="http://www.utubon.com/wp-content/themes/secondary/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.utubon.com/wp-content/themes/secondary/js/jquery.plugins.js"></script>
<script type="text/javascript" src="http://www.utubon.com/wp-content/themes/secondary/js/javascript.js"></script>

请自行下载或复制本站的这些png、js文件。演示则请在本站演示。<完>

已有2条评论 快速评论
  1. frustigor #79楼 回复给@78楼 2011/07/20 22:54:48 回复

    怎么不是乌托邦呢,大家都先说乌托邦的,呵呵

  2. 旗袍美女 #78楼 2011/07/20 21:34:36 回复

    这名字让我想起了乌邦图。。。

填写个人信息,赶快回复吧!