HTML 回到顶部 浮动
<div id="FloatDIV" style="position: absolute; top: 0px; z-index: 9999; background: #fff000; cursor: pointer;" onclick="window.scrollTo(0,0);">回到顶部</div>
<script type="text/javascript">// <![CDATA[
var MarginLeft = 10; //浮动层离浏览器右侧的距离
var MarginTop = document.body.clientHeight - 80; //浮动层离浏览器顶部的距离(浏览器高度-div高度)
var Width = 25; //浮动层宽度
var Heigth= 80; //浮动层高度 //设置浮动层宽、高
function Set()
{
document.getElementById("FloatDIV").style.width = Width + 'px';
document.getElementById("FloatDIV").style.height = Heigth + 'px';
} //实时设置浮动层的位置
function Move()
{
var b_top = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
var b_width= document.body.clientWidth;
document.getElementById("FloatDIV").style.top = b_top + MarginTop + 'px';
document.getElementById("FloatDIV").style.left = b_width - Width - MarginLeft + 'px';
setTimeout("Move();",100);
} Set();
Move();
// ]]></script>
参考:博客园
HTML 回到顶部 浮动的更多相关文章
- web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
- 浮动【电梯】或【回到顶部】小插件:iElevator.js
iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- iOS点击状态栏回到顶部底层实现原理
在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- iOS tableView 滚动后回到顶部
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...
- 页面上常用的一些小功能--QQ、回到顶部
1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 10 MySQL索引选择与使用
索引概述 每种存储引擎对每个表至少支持16个索引,总索引长度至少256字节. MyISAM和InnoDB的表默认创建BTREE索引.MEMORY引擎默认使用HASH索引,但也支持BTR ...
- Golang的类型转换实战案例
Golang的类型转换实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数据类型概述 基础数据类型概述,博主推荐阅读: 布尔型: https://www.cnblogs. ...
- 英语学习 - 进行时态的被动 ( be being done )
be being done 例: The story book was being read by him .
- 中文文本分类之TextRNN
RNN模型由于具有短期记忆功能,因此天然就比较适合处理自然语言等序列问题,尤其是引入门控机制后,能够解决长期依赖问题,捕获输入样本之间的长距离联系.本文的模型是堆叠两层的LSTM和GRU模型,模型的结 ...
- 洛谷 三月月赛 C
呵呵呵呵,这个sb题做了好久,然并卵,还是不对. 挖坑++ 然而我感觉我做的对了,偷瞄了一下题解应该没什么问题. 这个题有n个点,n条边,所以是个基环树(我也不知道是不是这个名) 要每个点有联通,就是 ...
- 十八、JavaScript之布尔类型
一.代码如下 二.运行效果 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" conten ...
- PowerDesigner创建索引
防止以后忘记怎么设置索引,记录下来方便查翻 1:选中Table 2:找到Table对应的Indexes 3:选中一条记录,点击红框中的小手(Properties)或双击该记录,进入到详细里面 4:找到 ...
- Flink 笔记(一)
简介 Flink是一个低延迟.高吞吐.统一的大数据计算引擎, Flink的计算平台可以实现毫秒级的延迟情况下,每秒钟处理上亿次的消息或者事件. 同时Flink提供了一个Exactly-once的一致性 ...
- 第十七篇 ORM跨表查询和分组查询---二次剖析
ORM跨表查询和分组查询---二次剖析 阅读目录(Content) 创建表(建立模型) 基于对象的跨表查询 一对多查询(Publish与Book) 多对多查询 (Author 与 Book) 一对一查 ...
- mark LINUX_6.8 python_2.6.6 setup版本升级 python 2.7.9 安装 pip 临时使用国内镜像源库 指定模块版本 删除指定模块
简单但却又经常需要使用 网上 贴子也很多 也经常用 所以 做个mark 吧: 1首先下载python2.7.9 源tar包 源码安装 可利用linux自带下载工具wget下载,如下所示: ...