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

页面顶置效果

 
阅读更多
<script>
//<![CDATA[
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()', 50);
}
}
}

//]]>
<script>

实例:
<a href="#" onclick="goto_top()">TOP</a>
分享到:
评论

相关推荐

    html页面置顶置底

    &lt;title&gt;HTML页面置顶置底 #top, #bottom { position: fixed; bottom: 20px; width: 50px; height: 50px; background-color: #f0f0f0; border-radius: 50%; cursor: pointer; display: none; /* 初始隐藏...

    H5经典案例_前端开发_Blog顶置卡片设计(css+js).rar

    在这个Blog顶置卡片设计中,我们可能会用到如`&lt;header&gt;`、`&lt;article&gt;`、`&lt;section&gt;`和`&lt;div&gt;`等标签来定义不同的内容区域。例如,`&lt;header&gt;`用于创建顶部卡片部分,`&lt;article&gt;`用于卡片内的主要内容,而`&lt;div&gt;`可以...

    用css和JavaScript做成的呼吸灯效果置底和置底.zip

    在这个项目中,我们利用CSS(层叠样式表)和JavaScript来实现这种效果,并将其应用于页面的顶部和底部,形成一种动态的视觉体验。 首先,我们要理解CSS在其中的作用。CSS是网页样式和布局的主要工具,它可以控制...

    一个可以设计出漂亮页面的工具

    1. 导航条(Navbar):提供固定顶置、折叠式等不同类型的导航栏。 2. 模态框(Modal):在当前页面上弹出一个浮动窗口,用于显示额外信息或进行交互操作。 3. 下拉菜单(Dropdowns):在按钮或导航链接下显示可选的...

    一套很酷的bootstrap后台管理系统静态页面

    1. 导航栏(Navbar):提供顶部导航菜单,可以包含品牌标识、导航链接和下拉菜单,支持固定顶置、折叠和水平/垂直布局。 2. 表格(Table):用于展示数据的表格,支持排序、分页和响应式布局,便于在不同屏幕尺寸下...

    置顶和置底的js

    通过监听滚动事件,我们可以根据页面滚动状态调整元素的样式,从而实现置顶或置底的效果。需要注意的是,对于移动设备,可能需要考虑不同设备的视口大小和触摸事件,以确保兼容性和用户体验。 以上就是关于使用...

    返回顶部反馈置底

    "置底"则是相反的效果,让元素始终位于页面的底部。这些功能可以通过CSS的position属性实现,将其设置为fixed,并调整top或bottom属性值。 "反馈"功能是网站与用户互动的一种方式,它允许用户直接在网站上提出问题...

    bootStrap页面实例

    1. **导航栏(Navbar)**:Bootstrap的导航栏组件支持固定顶置、折叠、品牌标识和导航链接。 2. **Jumbotron**:大容器,常用于突出显示页面主要内容,可以添加背景图片或颜色。 3. **栅格系统(Grid System)**:...

    小程序自定义顶部(可以是图片或标题),带返回箭头和回到首页

    在微信小程序开发中,自定义顶部(导航栏)是一个常见的需求,它允许开发者根据应用的UI设计自由定制页面头部的样式和功能。标题所提到的"小程序...通过这样的方式,不仅可以提升应用的视觉效果,还能增强用户体验。

    全国哀悼日网站页面变成灰色的filter方法

    这样可以确保即使页面中没有CSS文件,同样可以应用滤镜效果。 如果网站没有使用CSS,或者站长需要快速简便的方法来实现哀悼效果,还可以在HTML页面的和之间直接插入一段内联的样式代码。例如:`...

    vue 每次渲染完页面后div的滚动条保持在最底部的方法

    `methods`中的函数通过`this.$nextTick`来实现第一次页面渲染后滚动条位于底部的效果,这可以用于页面初次加载后立即滚动到底部的场景。 综上所述,通过合理利用Vue的生命周期钩子、`$nextTick`以及DOM操作,我们...

    js实现返回顶部,置底

    在网页开发中,提供“返回顶部”和“置底”的功能是提高用户体验的重要一环,尤其是在内容丰富的页面,如论坛(bbs)等项目中。本文将详细介绍如何使用JavaScript(js)来实现这两个功能。 首先,我们需要理解...

    让窗体始终出现在最顶层

    在编程领域,尤其是在开发桌面应用程序时,经常会有需求让某个窗口始终保持在最顶层,以便用户在操作其他程序或窗口时,这个特定的窗口仍然可见。本文将深入探讨如何使用C#语言和WinForms框架实现这样的功能,即创建...

    前端工程师-html模板组件-顶部导顶部导航菜单-带图标.zip

    例如,当用户滚动页面时,可以实现导航菜单的固定顶置(sticky header)效果,或者在点击菜单项后展开下拉子菜单。这些功能可以通过监听滚动事件、添加和移除CSS类来实现。 总的来说,这个压缩包中的HTML模板组件...

    基于jQuery实现的网站漂浮置顶和置底特效源码.zip

    在本项目中,"基于jQuery实现的网站漂浮置顶和置底特效源码.zip" 提供了一套实现网页元素在页面滚动时保持固定位置的特效代码。这种效果通常被称为“固定定位”或“吸附效果”,可以用于创建如侧边栏导航、浮动广告...

    个性网址导航HTML程序,菜单固顶

    【描述】"个性网址导航HTML程序,菜单固定顶置代码"是指该程序采用了HTML、CSS以及可能的JavaScript技术,实现了菜单栏在页面滚动时始终保持在视口顶部的效果。这种设计提高了用户体验,使得用户无需滚动回顶部就能...

    使用 TabActivity 实现滑动翻页(带动画)和标签置底

    滑动翻页通常通过`ViewPager`组件来实现,它允许用户左右滑动页面来浏览多个`Fragment`。虽然在`TabActivity`中直接集成`ViewPager`是不常见的,但可以通过将`ViewPager`嵌入到`TabActivity`的布局中,然后通过...

    非常漂亮的导航栏

    例如,当用户滚动页面时,导航栏可能会有固定顶置的效果,或者在鼠标悬停时改变颜色或显示下拉菜单,这些功能都需要JavaScript来实现。 总结起来,这款“非常漂亮的导航栏”设计涵盖了HTML结构、CSS样式和...

    WordPress主题YusiPro

    首页可视化拖拽:不同的模块之间位置随意互换,效果可视化展现,幻灯片无限增加,模块信息高度自定义设置 列表无限加载:可选开启并设置无限加载页数,并置选择不同的翻页风格 列表多种布局模式:可以选择缩略图...

Global site tag (gtag.js) - Google Analytics