<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>
分享到:
相关推荐
<title>HTML页面置顶置底 #top, #bottom { position: fixed; bottom: 20px; width: 50px; height: 50px; background-color: #f0f0f0; border-radius: 50%; cursor: pointer; display: none; /* 初始隐藏...
在这个Blog顶置卡片设计中,我们可能会用到如`<header>`、`<article>`、`<section>`和`<div>`等标签来定义不同的内容区域。例如,`<header>`用于创建顶部卡片部分,`<article>`用于卡片内的主要内容,而`<div>`可以...
在这个项目中,我们利用CSS(层叠样式表)和JavaScript来实现这种效果,并将其应用于页面的顶部和底部,形成一种动态的视觉体验。 首先,我们要理解CSS在其中的作用。CSS是网页样式和布局的主要工具,它可以控制...
1. 导航条(Navbar):提供固定顶置、折叠式等不同类型的导航栏。 2. 模态框(Modal):在当前页面上弹出一个浮动窗口,用于显示额外信息或进行交互操作。 3. 下拉菜单(Dropdowns):在按钮或导航链接下显示可选的...
1. 导航栏(Navbar):提供顶部导航菜单,可以包含品牌标识、导航链接和下拉菜单,支持固定顶置、折叠和水平/垂直布局。 2. 表格(Table):用于展示数据的表格,支持排序、分页和响应式布局,便于在不同屏幕尺寸下...
通过监听滚动事件,我们可以根据页面滚动状态调整元素的样式,从而实现置顶或置底的效果。需要注意的是,对于移动设备,可能需要考虑不同设备的视口大小和触摸事件,以确保兼容性和用户体验。 以上就是关于使用...
"置底"则是相反的效果,让元素始终位于页面的底部。这些功能可以通过CSS的position属性实现,将其设置为fixed,并调整top或bottom属性值。 "反馈"功能是网站与用户互动的一种方式,它允许用户直接在网站上提出问题...
1. **导航栏(Navbar)**:Bootstrap的导航栏组件支持固定顶置、折叠、品牌标识和导航链接。 2. **Jumbotron**:大容器,常用于突出显示页面主要内容,可以添加背景图片或颜色。 3. **栅格系统(Grid System)**:...
在微信小程序开发中,自定义顶部(导航栏)是一个常见的需求,它允许开发者根据应用的UI设计自由定制页面头部的样式和功能。标题所提到的"小程序...通过这样的方式,不仅可以提升应用的视觉效果,还能增强用户体验。
这样可以确保即使页面中没有CSS文件,同样可以应用滤镜效果。 如果网站没有使用CSS,或者站长需要快速简便的方法来实现哀悼效果,还可以在HTML页面的和之间直接插入一段内联的样式代码。例如:`...
`methods`中的函数通过`this.$nextTick`来实现第一次页面渲染后滚动条位于底部的效果,这可以用于页面初次加载后立即滚动到底部的场景。 综上所述,通过合理利用Vue的生命周期钩子、`$nextTick`以及DOM操作,我们...
在网页开发中,提供“返回顶部”和“置底”的功能是提高用户体验的重要一环,尤其是在内容丰富的页面,如论坛(bbs)等项目中。本文将详细介绍如何使用JavaScript(js)来实现这两个功能。 首先,我们需要理解...
在编程领域,尤其是在开发桌面应用程序时,经常会有需求让某个窗口始终保持在最顶层,以便用户在操作其他程序或窗口时,这个特定的窗口仍然可见。本文将深入探讨如何使用C#语言和WinForms框架实现这样的功能,即创建...
例如,当用户滚动页面时,可以实现导航菜单的固定顶置(sticky header)效果,或者在点击菜单项后展开下拉子菜单。这些功能可以通过监听滚动事件、添加和移除CSS类来实现。 总的来说,这个压缩包中的HTML模板组件...
在本项目中,"基于jQuery实现的网站漂浮置顶和置底特效源码.zip" 提供了一套实现网页元素在页面滚动时保持固定位置的特效代码。这种效果通常被称为“固定定位”或“吸附效果”,可以用于创建如侧边栏导航、浮动广告...
【描述】"个性网址导航HTML程序,菜单固定顶置代码"是指该程序采用了HTML、CSS以及可能的JavaScript技术,实现了菜单栏在页面滚动时始终保持在视口顶部的效果。这种设计提高了用户体验,使得用户无需滚动回顶部就能...
滑动翻页通常通过`ViewPager`组件来实现,它允许用户左右滑动页面来浏览多个`Fragment`。虽然在`TabActivity`中直接集成`ViewPager`是不常见的,但可以通过将`ViewPager`嵌入到`TabActivity`的布局中,然后通过...
例如,当用户滚动页面时,导航栏可能会有固定顶置的效果,或者在鼠标悬停时改变颜色或显示下拉菜单,这些功能都需要JavaScript来实现。 总结起来,这款“非常漂亮的导航栏”设计涵盖了HTML结构、CSS样式和...
首页可视化拖拽:不同的模块之间位置随意互换,效果可视化展现,幻灯片无限增加,模块信息高度自定义设置 列表无限加载:可选开启并设置无限加载页数,并置选择不同的翻页风格 列表多种布局模式:可以选择缩略图...