今天无意间看到了360导航-右侧页面滚动定位效果，发现他们做的火箭上升的效果挺有趣的，就模仿了一个类似的。在IE8，ff，opera中测试可以；
具体代码如下：
<!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="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
body{
position:relative;
}
#content{
width:980px;
border:1px solid #ccc;
margin:0 auto;
}
#fixDiv1{
position:fixed;
width:50px;
height:50px;
background-color:#ddd;
border:1px solid #ccc;
right:50px;
bottom:160px;
display:none;
cursor:pointer;
}
#fixDiv2{
position:fixed;
width:50px;
height:50px;
background-color:#ddd;
border:1px solid #ccc;
right:50px;
bottom:100px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="content">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="fixDiv1">顶部</div>
<div id="fixDiv2">底部</div>
</body>
<script>
$(function(){
/*
* 仿360导航，右侧页面滚动定位效果；
* made by keimon
* 2013-03-21
*/
var win_height = $(window).height(); //788 浏览器高度
var web_height = $(document).height(); //2179 总的页面高度
var fixDiv1_bottom = parseInt($('#fixDiv1').css('bottom'));
//滚动滚动条判断高度是否大于浏览器高度，若大于则显示‘顶部’div；
$(window).scroll(function(){
if($(window).scrollTop()>win_height){
$('#fixDiv1').show();
}else{
$('#fixDiv1').css({'background-color':'#ddd','bottom':'160px'}).hide();
}
})
//点击‘底部’div使页面滚动到底部；
$('#fixDiv2').click(function(){
$('html,body').animate({scrollTop: (web_height-win_height)+'px'},1000); //注意这里用的是$('html,body')
})
//‘底部’div颜色变化；
$('#fixDiv2').hover(function(){
$(this).css('background-color','pink');
},function(){
$(this).css('background-color','#ddd');
})
//‘顶部’div的操作；
$('#fixDiv1').hover(function(){
$(this).css('background-color','pink');
},function(){
if(!$('#fixDiv1').is(':animated')){
$(this).css('background-color','#ddd');
}
})
//点击‘顶部’div后，呈现的动画效果；
$('#fixDiv1').click(function(){
$('html,body').animate({scrollTop: '0px'},1000);
$('#fixDiv1').animate({bottom: (win_height-fixDiv1_bottom)*2-100+'px'},1000);
})
})
</script>
</html>
相关推荐
jQuery页面滚动显示浮动菜单栏锚点定位效果
适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗的二手车旗舰店网页，jQuery是一个快速、小且功能丰富的JavaScript库。
随页面滚动定位的侧边栏悬浮框js插件，包括页面自适应、函数节流、悬浮区域高度自适应等。具体效果参考博客 https://blog.csdn.net/zh_rey/article/details/80136619
滚动页面到顶部，实现某元素固定到顶部效果 点击某个按钮，页面滚动到相应的位置 滚动页面，当到达某个位置时，高亮对应的相关按钮 元素吸顶实现方式 关于元素吸顶效果，通过查阅相关资料和相关测试，有三种方式...
一款基于jquery.section-scroll插件实现的网页锚点定位全屏滚动切换特效代码，全屏滚动切换的网站目前挺流行的，这种效果一般用于网站单页介绍。
最终效果如下：（注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内）-chrome 完成这个功能需要注意： 1、点击导航平滑滚动到导航内容处 2、div内滚动时当前导航需要做响应 代码如下： 1、html结构...
jQuery 实现页面滚动时层的智能浮动定位
jQuery滚动楼层效果代码是一款页面滚动描点定位快速跳转代码。
一款可以全屏展示一个公司或者工厂发展历史的网页特效，支持定位功能，注意底部在展开或者合并的时候的效果，貌似最近比较流行的效果
本篇文章主要介绍了Javascript实现页面滚动时导航智能定位，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
我们玩网页微博时，消息提示框一直会出现在页面右上方，即使下拉滚动条它都会浮动定位在右上方，直到你关闭小时提示框。类似的效果在淘宝商品详情页面上也有，当我们下拉滚动页面时，用来导航切换的“宝贝详情”、...
附件提供了一个横向、一个竖向的导航定位功能demo，当你点击对应的导航，页面会垂直滑动到对应位置，效果看起来很舒服 其实原理只有一个，这里简要说明一下使用方法 1、首先写好你的网页html以及css样式，...
jquery实现的网页动态定位效果，左侧有一个导航栏，点击导航栏的内容主页面会滚动至对应位置，也主网页滚动。在右侧的空白区域，同时也显示有向上滚动 、向下滚动的操作按钮，也可通过此按钮来控制网页向上、向下...
jquery网页浮动导航点击锚点链接屏幕滚动
滚动元素的定位值计算； c.滚动周期设定； 代码如下： css部分： 代码如下: /*测试用的高度*/ body{ height:3000px;} div,ul,li,body{margin:0; padding:0;} /*position:absolute;用于元素的定位*/ #roll{width:50px...
主要介绍了vue进入页面时滚动条始终在底部，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
而当我们下拉滚动条，随着页面向下滚动，当此工具条接触到浏览器的上边缘时，这时就会独立出来固定在顶部，不跟随页面滚动而滚动了，如下图： 类似的例子效果我们在别的网站上都有看到过，例如腾讯微博首页上，当...
js+css3页面滚动图片倾斜动画特效，利用.container元素集合所有图片，自定义滚动行为，每个div对应设置背景图片，当网页上下滚动时图片元素倾斜动画展示效果。