今天无意间看到了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，一个广泛使用的JavaScript库，提供了丰富的功能来简化这种效果的实现。下面将详细介绍如何使用jQuery来...
在网页设计中，滚动导航是一种常见的交互元素，它能够随着用户滚动页面而改变位置，始终保持在视口可见区域，为用户提供便捷的导航。jQuery库因其简洁的API和强大的功能，常被用来实现这种效果。本篇文章将深入探讨...
在网页设计中，全屏页面滚动效果是一种常见的交互设计手法，它能带给用户沉浸式的浏览体验。这种效果常被用于企业官网、产品展示页或艺术类网站，以增强视觉冲击力和用户参与度。"jQuery全屏页面滚动效果苹果官网...
HTML5页面滚动展示效果结合JavaScript实现的大屏页面特效是一种现代网页设计趋势，它为用户提供了一种沉浸式的浏览体验。这种效果通常被称为视差滚动，它让背景元素以较慢的速度移动，与前景元素形成视觉差异，营造...
《jQuery定位滚动导航效果代码详解》 在网页设计中，导航栏是不可或缺的一部分，它为用户提供了一种方便快捷的方式，使他们能够轻松地在网站的不同部分之间切换。jQuery定位滚动导航效果是一种流行的交互设计，它...
在网页设计中，有时我们需要某些元素（如通知、提示框或广告）始终保持在用户视野范围内，即使用户滚动页面也是如此。这种效果通常被称为“固定定位”或“智能定位”。jQuery 提供了简单易用的 API 来实现这种效果，...
全屏页面滚动效果的核心在于监听用户的滚动事件，并对页面内容进行相应的定位和动画处理。在jQuery中，可以使用`$(window).scroll()`函数来绑定滚动事件。当用户滚动页面时，这个事件会被触发，然后执行我们定义的回...
本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时，展示一个浮动菜单栏，并实现锚点定位效果。这个功能对于提高用户体验，尤其是内容丰富的长页面，是非常有用的，因为它可以帮助用户快速导航到页面的不同...
另外，JavaScript也可以与CSS3结合，通过监听滚动事件来实现更复杂的滚动定位效果。例如，可以使用`window.onscroll`函数来检测用户滚动，然后动态调整元素的样式。但这需要更多的代码和计算，通常适用于需要更高级...
**jQuery全屏页面滚动导航切换效果详解** 在网页设计中，全屏页面滚动导航是一种流行的交互方式，它能提供沉浸式的用户体验，使用户在浏览网站时感到更加舒适和流畅。结合jQuery实现的导航切换效果，可以提升网站的...
页面视觉差滚动效果是一种在网页设计中常用的创新技术，它通过使用HTML5和CSS3来增强用户的浏览体验。这种效果通常被称作“Parallax Scrolling”，它利用不同层元素以不同的速度滚动，从而创造出深度感和立体感，...
当用户滚动页面时，固定顶部定位的导航栏能始终保持可见，提供持续的导航支持。"jQuery实现固定顶部 定位滚动导航效果代码"这个资源就是针对这种交互效果的实现方法。 jQuery是一个广泛使用的JavaScript库，它简化...
标题提到的"jQuery上下滑动页面滚动定位代码"是一个利用jQuery实现的特殊页面滚动效果，它提供了上下箭头以及描点定位功能，以提升用户的浏览体验。下面我们将深入探讨这个主题，讲解相关的jQuery知识、页面滚动技术...
在网页设计中，全屏页面滚动效果是一种常见的交互设计手法，尤其在苹果官网等高端品牌网站上被广泛应用，为用户提供流畅、优雅的浏览体验。这种效果通常被称为"Parallax Scrolling"或"Full Page Scrolling"，它允许...
【个人简历滚动定位类锚点定位效果源码下载】是一个针对网页设计与开发的资源，主要涉及的技术点是HTML、CSS以及JavaScript中的锚点定位（Anchor Link）技术，这种技术常用于实现页面内部链接，使得用户能够快速跳转...
根据给定文件的信息，我们可以详细地探讨一下网页中如何实现文字滚动效果的相关知识点。这主要涉及到HTML中的`<marquee>`标签以及CSS的一些基本用法。 ### 一、`<marquee>`标签介绍 在HTML中，`<marquee>`标签用于...
标题 "jquery鼠标滚动全屏页面滚动切换效果" 描述了一个使用jQuery实现的网页交互功能，它使得用户在鼠标滚动时，全屏页面能够平滑地切换内容。这种效果常见于现代网页设计中，用于创建引人入胜的用户体验，尤其适用...
【jQuery左侧导航滑动网页定位效果】是一种常见的前端交互设计，它主要应用于具有大量内容的长页面，使得用户可以通过导航栏快速跳转到页面的特定部分。这种效果大大提升了用户体验，因为用户无需手动滚动浏览整个...
【网页滚动条效果详解】 网页滚动条作为用户与页面交互的重要元素，其设计和功能往往影响着用户体验。在“超酷带纹理网页滚动条效果”这个主题中，我们将深入探讨如何利用JavaScript（JS）实现独特且吸引人的滚动条...
随页面滚动定位的侧边栏悬浮框js插件，包括页面自适应、函数节流、悬浮区域高度自适应等。具体效果参考博客 https://blog.csdn.net/zh_rey/article/details/80136619