HTML 回到顶部 浮动
2024-10-08 18:58:42
回到顶部
<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>
参考:博客园
最新文章
- OpenGL、Open Inventor、WebGL、Three.js、ARToolkit、JSARToolkit
- php 二分查找
- Codevs No.1553 互斥的数
- 转:艾瑞咨询2016 IM云的发展趋势
- php类 静态变量赋值 static $name=";abc";
- Codeforces Round #326 div2
- js识别终端类型
- 在MAC上安装GitHub DeskTop
- 一个三维点类Gpoint3的实现
- web api 安全设计(1)
- Kubenetes---Service--实践
- Machine Learning 神器 - sklearn
- apache利用http_referer进行防盗链
- Windows7 VS2015 下编译 Python3.6.6
- opencv学习笔记(五)
- 关于Android Camera2 API 的自动对焦的坑
- angular4-自定义组件
- 【转载记录】Accessing Device Drivers from C#
- _bstr_t可接受多字节、UNICODE字符串,方便用以字符集转换
- hashMap 和 linkedHashMap 的区别和联系