现在各大网站都能看到有返回顶部的快捷处理，下面就简单看看用css和jquery如何实现吧：
<html style="height:1000px">
<head>
<style type="text/css">
#totop a {
display: block;
width: 50px;
height: 50px;
overflow: hidden;
background-color: red;
}
#totop {
position: fixed;
bottom: 50px;
right: 15px;
cursor: pointer;
z-index: 999999;
display: block;
opacity: 1;
}
div ul{
height:60px;
width: 120px;
border:1px solid blue;
}
div ul li{
height:60px;
width: 40px;
list-style: none;
float:left;
}
</style>
</head>
<body>
<div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<p>this is some text.this is some text.this is some text.this is some text.</p>
<div id="totop">
<a title="返回顶部">返回顶部</a>
</div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var upperLimit=80;
var scrollElem=$("#totop");
var scrollSpeed=500;
scrollElem.hide();
$(window).scroll(function(){
var scrollTop=$(document).scrollTop();
if (scrollTop>upperLimit){
scrollElem.stop().fadeTo(300,1);
}else{
scrollElem.stop().fadeTo(300,0);
}
});
scrollElem.click(function(){
$('html,body').animate({scrollTop:0},scrollSpeed);
return false;
});
});
</script>
</body>
</html>
分享到：
相关推荐
在本案例中，我们讨论的是如何使用jQuery实现一个可隐藏的返回顶部按钮。jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作等任务，使得开发动态网页变得更加容易。 "jquery返回...
"仿太平洋返回顶部"是借鉴了太平洋汽车网实现这一功能的方式，主要涉及到的技术包括JavaScript、jQuery。下面将详细解释这些技术以及如何实现返回顶部效果。 **JavaScript基础** JavaScript 是一种广泛使用的客户端...
在网页设计中，"返回顶部"功能是一个常见且实用的设计元素，它允许用户快速地将浏览焦点移回页面顶部，特别是在长页面...你可以参考这个案例，结合自己的需求进行修改和扩展，以实现符合自己网站风格的返回顶部功能。
在这个案例中，jQuery用于实现页面元素的动态行为，如监听滚动事件和执行返回顶部的动画。 2. **CSS定位**：为了使返回顶部按钮始终位于页面的右下角，需要利用CSS的`position`属性。可以设置为`fixed`，这样元素将...
在“木蚂蚁网站jQuery返回顶部”这个案例中，这个功能是为木蚂蚁官方网站定制的，以提供更加便捷的用户体验。jQuery库因其简洁的API和强大的DOM操作能力，常被用来实现此类交互效果。 首先，我们需要理解jQuery的...
在这个"jQuery可变透明度返回顶部"的案例中，我们将探讨如何利用jQuery来创建一个具有透明度变化效果的返回顶部按钮。 首先，我们需要在HTML中添加一个用于返回顶部的元素，通常是一个固定在屏幕底部或侧边的按钮。...
JavaScript负责监听用户的滚动行为，判断何时显示或隐藏返回顶部的图标（在这个案例中是“小火箭”），以及处理点击返回顶部时的平滑滚动事件。CSS3则用于设置图标样式，以及可能的动画效果，例如淡入淡出、滑动等。...
在本案例中，我们讨论的是一个使用jQuery实现的此类功能，名为“jQuery超出屏幕高度显示返回顶部”。 jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在本插件中，...
在这个返回顶部的案例中，HTML会创建一个按钮元素，CSS则会控制这个按钮的显示和隐藏。 在HTML部分，通常我们会创建一个固定在页面底部的`<button>`元素，如下所示： ```html 返回顶部 ``` 然后，我们使用CSS来...
"jQuery小火箭返回顶部"是一种常见的网页交互设计，它允许用户快速将页面滚动回顶部，通常以一个醒目的图标（如火箭）的形式出现在页面底部，点击后页面会以动画效果迅速滚动到顶部。这个功能在长页面或者内容丰富的...
在本案例中，jQuery被用来实现导航栏的动态行为和返回顶部的交互效果。 1. **浮动导航**：浮动导航通常是指在用户滚动页面时，始终保持在屏幕可视区域内的导航栏。这种设计可以让用户随时看到导航，方便他们快速...
在这个案例中，CSS可能定义了返回顶部按钮的外观，包括颜色、大小、形状、位置等视觉属性。CSS还可能使用了媒体查询（media queries），使得这个按钮在不同设备和屏幕尺寸下都能保持良好的可读性和可用性。例如，...
4. **可变透明度**：在本案例中，返回顶部按钮的透明度会随用户滚动页面而变化。当用户远离页面顶部时，按钮的透明度逐渐增加，使其更显眼；当用户靠近顶部时，透明度则降低，让按钮更加低调，不打扰用户的视线。 5...
【jQuery冲天火箭返回顶部动画特效】是一种使用JavaScript库jQuery实现的创新网页交互效果，它为网站添加了一个别致的“返回顶部”功能。这个特效将传统的“返回顶部”按钮设计成了一枚升空的火箭，给用户带来视觉上...
在网页设计中，提高用户体验是至关重要的，而“jQuery带在线客服的右侧悬浮返回顶部代码”就是一个很好的实践案例。这个代码结合了两个常见的功能：在线客服系统和返回顶部按钮，两者都是为了提升用户在网站上的交互...
在网页设计中，创建一个带有返回顶部按钮的固定右侧悬浮菜单是提高用户体验的重要手段。这样的设计使得用户在浏览长页面时能轻松地访问导航菜单，同时方便他们快速回到页面顶部。下面将详细介绍这个"带返回顶部按钮...
通过这个"jquery小火箭返回顶部"的实践案例，我们可以学习如何使用jQuery来创建动态、交互式的网页元素，提升用户在网站上的浏览体验。同时，这也是一个学习和理解jQuery基本语法和功能的好机会。在实际开发中，你...
学习和理解这个案例，不仅可以帮助你掌握如何用jQuery创建返回顶部的特效，还能加深对jQuery选择器、事件处理和动画制作的理解。在实际项目中，这种特效经常被用到，因为它提高了网站的可用性和用户的满意度。同时，...
"jQuery带QQ客服下拉返回顶部代码"是一个实用的网页交互组件，它展示了如何使用jQuery和JavaScript来创建响应用户滚动的动态元素，同时也提供了与QQ客服系统集成的示例，对于前端开发者来说，这是一个很好的学习和...
案例2-1 "使用ADO.NET控件查询SQL Server数据库"可能详细展示了以上步骤，包括如何在事件处理程序中编写代码，以及如何将查询结果显示在用户界面组件上。通过这个案例，开发者可以学习到如何在VB2005项目中有效地...