`
ll584310793
  • 浏览: 18296 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

带滑动效果效果的“回顶部”

阅读更多

<html >
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>CSS中国 - CSS教程 - CSS视频教程</title>
<style>
#sl{
background: url("backtop.gif") -101px -118px;
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>
CSS中国[www.csschina.net],提供DIV+CSS海量教程,搜罗各类DIV+CSS相关教程、视频教程,最新的Web2.0标准资讯,DIV+CSS布局入门教程,CSS布局实例,CSS样式.教程适合初学者循序渐进的学习!<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 />CSS中国[www.csschina.net],提供DIV+CSS海量教程,搜罗各类DIV+CSS相关教程、视频教程,最新的Web2.0标准资讯,DIV+CSS布局入门教程,CSS布局实例,CSS样式.教程适合初学者循序渐进的学习!<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />CSS中国[www.csschina.net],提供DIV+CSS海量教程,搜罗各类DIV+CSS相关教程、视频教程,最新的Web2.0标准资讯,DIV+CSS布局入门教程,CSS布局实例,CSS样式.教程适合初学者循序渐进的学习!<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="sl">
<a href="javascript:void(0)" onclick="goto_top()"></a>
</div>
</body>
<script type="text/javascript">
  var goto_top_type = -1;
 var goto_top_itv = 0;
 
 function goto_top_timer()
 {
 var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
 var moveby = 15;
 
 y -= Math.ceil(y * moveby / 100);
 if (y < 0) {
 y = 0;
 }
 
 if (goto_top_type == 1) {
 document.documentElement.scrollTop = y;
 }
 else {
 document.body.scrollTop = y;
 }
 
 if (y == 0) {
 clearInterval(goto_top_itv);
 goto_top_itv = 0;
 }
 }
 
 function goto_top()
 {
 if (goto_top_itv == 0) {
 if (document.documentElement && document.documentElement.scrollTop) {
 goto_top_type = 1;
 }
 else if (document.body && document.body.scrollTop) {
 goto_top_type = 2;
 }
 else {
 goto_top_type = 0;
 }
 
 if (goto_top_type > 0) {
 goto_top_itv = setInterval('goto_top_timer()', 10);
 }
 }
}
</script>
</html>

分享到:
评论

相关推荐

    带吸附效果顶部导航(支持左右滑,下拉刷新,上拉加载更多,返回顶部,加载动画).zip

    在移动应用开发中,"带吸附效果顶部导航"是一种常见的设计模式,用于提供更好的用户体验。这种导航栏通常位于应用屏幕的顶部,具有多种交互功能,如左右滑动切换页面、下拉刷新、上拉加载更多内容以及快速回到页面...

    酷炫滑动效果 swift

    总的来说,“酷炫滑动效果 Swift”项目提供了一个完整的解决方案,包括扇形滑动动画、自动切换、顶部和底部标记以及网络图片加载的支持。开发者可以基于此快速构建自己的图片展示模块,提升用户体验,同时也展示了...

    页面回到顶部滑动效果

    在网页设计中,"页面回到顶部滑动效果"是一种常见的用户体验优化功能,它允许用户轻松地将浏览的页面瞬间滚动回顶部,而无需手动滚动鼠标或触摸屏幕。这个功能尤其在长篇内容的网页中非常实用,比如博客、论坛或者...

    仿淘宝购物车滑动效果

    在IT行业中,创建类似淘宝购物车的滑动效果是一项常见的前端开发任务,它涉及到用户体验设计和交互技术。这种效果能够使用户在浏览商品时获得流畅的体验,提高网站的吸引力和用户满意度。以下是对这个主题的详细解释...

    Android仿微博详情页滑动固定顶部栏效果.zip

    在Android应用开发中,创建一个类似微博详情页的滑动固定顶部栏效果是一项常见的需求,它能提升用户体验,使得用户在浏览长内容时仍能快速访问顶部信息。这个压缩包"Android仿微博详情页滑动固定顶部栏效果.zip"包含...

    高仿淘宝首页菜单滑动效果

    高仿淘宝首页菜单滑动效果,不分页。 重要逻辑:通过菜单的偏移量计算PageControl的偏移量 pageControl的偏移量为pageControl的总宽度减去滑块的总宽度, 同理scrollView的偏移量为scrollView的内容宽度减去...

    Axure教程:实现移动端页面上下滑动效果.docx

    Axure 教程:实现移动端页面上下滑动效果 axure 是一款功能强大且灵活的原型设计工具,广泛应用于移动端和 web 端的交互设计。实现移动端页面上下滑动效果是.axure 中的一项重要功能,今天我们将介绍两种实现页面...

    Android ScrollView向上滑动控件顶部悬浮效果实现

    本文将详细讲解如何实现ScrollView向上滑动时,控件顶部悬浮的效果,这种效果通常被称为“头部固定”或“吸顶”效果,常见于各种应用的导航栏或者工具栏。 首先,我们需要理解这个效果的基本原理。当用户在...

    类似手机联系人的滑动效果

    标题中的“类似手机联系人的滑动效果”指的是在Android或iOS等移动操作系统中常见的应用界面设计,这种设计通常用于联系人应用或者通讯录,让用户能够通过手指滑动浏览联系人列表,并且在滑动过程中呈现出平滑、自然...

    Activity上下滑动左右滑动效果

    在Android开发中,Activity的上下滑动和左右滑动效果是一种常见的用户交互设计,它可以提升应用的用户体验,使用户能够更自然地浏览和操作界面。本文将深入探讨如何实现这样的滑动效果,并提供相关的编程实践。 ...

    Android 自定义View结合自定义TabLayout实现顶部标签滑动效果

    Android 自定义 View 结合自定义 TabLayout 实现顶部标签滑动效果 Android 自定义 View 结合自定义 TabLayout 可以实现顶部标签滑动效果,这是一种常见的 UI 布局方式,尤其是在移动应用程序中。在本文中,我们将...

    swipe多种手机触屏滑动效果

    "swipe多种手机触屏滑动效果"这个主题涵盖了如何在手机应用中实现各种丰富的滑动效果,以提升用户的操作体验。在这个话题中,我们将深入探讨滑动手势在移动开发中的应用,主要涉及以下几个方面: 1. **基础滑动事件...

    ViewPager+Fragment-仿GooglePlay 顶部可滑动效果

    在Android开发中,"ViewPager+Fragment-仿GooglePlay 顶部可滑动效果"是一个常见的应用场景,主要用于实现类似Google Play商店的界面布局,其中顶部栏可以水平滑动切换,下方是ViewPager展示的内容。这个设计提供了...

    高仿网易新闻顶部滑动条效果

    在本文中,我们将深入探讨如何实现“高仿网易新闻顶部滑动条效果”。这个效果是许多移动应用和网站为了提供用户友好的导航体验而广泛采用的设计元素,它通常出现在页面顶部,显示多个分类标签,用户可以左右滑动来...

    Android RecyclerView 实现滑动吸顶效果

    本教程将详细介绍如何在RecyclerView中实现滑动吸顶(Sticky Header)效果,这一功能常见于各种应用,如天气预报、日历等,可以固定顶部某一栏在用户滚动时始终可见。 首先,我们要理解RecyclerView.ItemDecoration...

    TabSwitcher自定义控件(不带滑动效果)

    《TabSwitcher自定义控件:打造不带滑动效果的UI组件》 在Android应用开发中,界面设计和用户体验是至关重要的因素。一个优秀的应用不仅需要功能强大,还需要有一个直观且美观的用户界面。TabSwitcher控件是实现多...

    Android 中实现简单的滑动效果

    在Android开发中,创建动态和交互式的用户界面是至关重要的,滑动效果是现代移动应用中常见的用户体验元素。本教程将聚焦于如何在Android平台上利用ViewPager、Fragment和PagerTabStrip来实现一个简单的页面滑动效果...

    网易新闻顶部滑动条效果

    9. **Android动画**: 在滑动过程中,可能会添加一些过渡动画,如平滑的滑动效果、渐变颜色变化等,这需要用到Android的动画框架,如ObjectAnimator、ValueAnimator或属性动画。 10. **性能优化**: 鉴于滑动操作的...

    网络加载缓存 滑动图片 顶部显示带滑动焦点

    在移动应用开发中,"网络加载缓存 滑动图片 顶部显示带滑动焦点"这一主题涉及到了几个关键的技术点,它们是构建高效、流畅用户体验的核心元素。以下是这些技术点的详细说明: 1. **网络加载**:在移动应用中,图片...

    自定义控件ListView上下滑动效果(开源)

    2. **滑动效果**: 上下滑动效果通常涉及到动画和触摸事件处理。在ZrcListView中,可能实现了诸如下拉刷新、上拉加载更多、滑动隐藏/显示头部或底部视图等效果。这些效果可以通过监听滑动事件,计算滑动距离和方向,...

Global site tag (gtag.js) - Google Analytics