代码如下：
<!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>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>返回顶部，js滚动代码演示1_阅微草堂</title>
<style>
#sl{
background: url("http://assets.taobaocdn.com/app/tc/img/decorate.png") -106px -105px;
height: 63px;
width: 19px;
right: 50px;
position: absolute;
display: none;
}
#sl a{
display: block;
height: 63px;
width: 19px;
}
</style>
<script type="text/javascript">
<!--
var $ = function(o){return document.getElementById(o);}
window.onload = function(){
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop;
if(scrollTop){
$("sl").style.display = 'block';
$("sl").style.top = (scrollTop + document.documentElement.clientHeight - 80)
+ "px";
}else{
$("sl").style.display = 'none';
}
}
}
//-->
</script>
</head>
<body>
<div style="height:2200px; margin:0 auto;"></div>
<div id="sl">
<a href="#" _fcksavedurl="#"></a>
</div>
</body>
</html>
链接地址：http://blog.100-tea.com/j/20100629142.html
分享到：
相关推荐
回顶部功能在网页设计中是一项常见且实用的功能，它允许用户快速返回页面的顶部，而无需手动滚动。在HTML中实现这一功能，通常涉及到JavaScript、CSS以及可能的HTML5 API。接下来，我们将深入探讨如何利用这些技术来...
这种设计常见于许多网站，特别是在用户滚动页面较长内容时，点击一个小火箭图标可以迅速将页面滚动回顶部，提升了用户体验。 首先，我们要理解这个“小火箭”实际上是一个UI元素，通常以动画形式出现。当用户滚动...
当用户点击这个按钮时，我们不希望页面瞬间跳回顶部，而是希望有一个平滑的动画效果。这可以通过修改页面的 scrollTop 属性实现。我们可以设定一个定时器，每隔一定时间（如每5毫秒）减少或增加 scrollTop 的值，...
在电子商务网站设计中，"回到顶部"功能是一个非常实用且用户体验友好的元素，尤其是在像淘宝这样的大型购物平台中。这个功能允许用户快速便捷地返回页面的顶部，无需滚动整个页面，提高了浏览效率。ShopEx易开店作为...
点击它，页面就会瞬间滚动回顶部。这个过程可以通过监听用户的滚动事件，并结合动画效果来实现，使页面滚动更加平滑。 首先，我们需要在HTML中添加一个"回到顶部"的按钮元素，可以是一个`<a>`标签或者`<button>`...
6. **动画效果**：为了增加用户体验，可以使用jQuery的`.animate()`方法，让页面平滑地滚动回顶部，而不是瞬间跳转。 压缩包中的“scrollbar.html”可能是实现了上述功能的示例代码文件。打开这个文件，你可以看到...
当用户向下滚动页面到一定程度时，一个通常设计为箭头或向上手势的按钮会出现在页面底部，点击这个按钮，页面就会瞬间滚动回顶部，极大地提升了浏览效率。 在实例中，我们可以看到作者libin_1在CSDN博客上分享了...
标题 "回到顶部的demo" 描述的是一个网页交互功能，通常称为“返回顶部”或“顶栏滚动按钮”。这个功能允许用户在浏览长页面时，只需点击一个小图标或按钮，就能快速回到页面的顶部，无需手动滚动。这种设计极大地...
点击按钮时，页面会平滑地滚动回顶部。这个功能不仅可以提升用户体验，也可以让页面看起来更加专业。 在这个压缩包文件中，可能包含了实现这个功能的HTML、CSS和JavaScript文件，你可以通过解压并查看这些文件来...
在WordPress这个强大的开源内容管理系统中，"回到顶部"插件是一个非常实用的功能，它能够为网站访客提供便捷的方式，使他们能够在浏览长页面时快速返回页面顶部，从而提升用户体验。"go-to-top-0.0.5"可能是这个插件...
【jQuery回到顶部功能详解】 在网页设计中，用户在浏览长页面时，有时需要快速返回页面顶部，这就需要用到“回到顶部”功能。本教程将详细讲解如何使用jQuery实现这一功能，以及相关的优化策略。 首先，我们需要...
在网页设计中，"回到顶部"功能是一个常见且实用的设计元素，它允许用户轻松地将浏览器滚动至页面的顶部，特别是在浏览长篇内容时。这个功能通常通过一个按钮或者链接实现，点击后页面瞬间返回到顶部。在这个"JS CSS...
标题“回到顶部火箭特效”指的是在网页设计中一种常见的交互元素，它允许用户通过点击一个图标或按钮快速返回页面的顶部。这种效果通常被设计成火箭发射的形象，以增加用户体验的趣味性和互动性。火箭升空的动画效果...
同时，为了在滚动过程中中断回顶部动画，我们可以监听鼠标的滚轮事件，并在滚轮滚动时停止定时器： ```javascript window.addEventListener('wheel', function(e) { if (document.getElementById('backToTop')....
6. **事件处理**：当用户点击按钮时，需要有一个事件处理器来响应这个点击事件，让页面立即滚动回顶部。这可以通过为按钮添加`onclick`事件监听器来实现。 7. **性能优化**：为了避免频繁的事件处理造成性能问题，...
为了让按钮具有实际的"回到顶部"功能，我们需要添加点击事件监听器，当用户点击该按钮时，利用`window.scrollTo`方法平滑地滚动回页面顶部。 ```javascript topBtn.addEventListener('click', function(e) { e....
在`js/gotoTop.js`中，我们监听滚动事件，当页面滚动到一定距离时显示按钮，点击按钮时则将页面滚动回顶部： ```javascript $(document).ready(function() { // 当页面加载完成后，隐藏返回顶部按钮 $("#gotoTop...
在这个“iscroll分页滚动（加回到顶部）”的示例中，我们将探讨如何利用iscroll实现分页滚动，并添加“回到顶部”的功能以及页面底部显示当前页数与总页数的提示。 首先，iscroll的核心在于它能够处理复杂的滚动...
在网页设计中，"回到顶部"功能是一种常见的用户体验优化手段，它允许用户快速将页面滚动条返回到页面的顶部，而无需手动滚动。这个功能在长页面或内容丰富的网站上尤其有用。本篇文章将深入探讨如何利用JavaScript...
"回到顶部"功能在网页设计中非常常见，它允许用户快速滚动到页面的顶部，而无需手动逐帧滚动。在JavaScript中实现这个功能并不复杂，主要涉及到DOM操作、事件监听和CSS样式控制。下面我们将详细讲解如何使用...