回到顶部
<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 回到顶部 浮动的更多相关文章

  1. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  2. 浮动【电梯】或【回到顶部】小插件:iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

  3. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  4. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  5. iOS点击状态栏回到顶部底层实现原理

    在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...

  6. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  7. iOS tableView 滚动后回到顶部

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...

  8. 页面上常用的一些小功能--QQ、回到顶部

    1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...

  9. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. makecert 制作数字证书 给DLL加一个数字签名

    声明:文章整理自互联网 我仅需要给dll添加(替换)一个签名,所以我只看了第一步和第三步,其余的部分我没有测试,不能保证内容的是否正确. 看了很多关于DLL加签名的教程 大多是错误的 完全无法正常走下 ...

  2. 响应式布局之 px、em、 rem

    一.写在前面的话 作为一面前端开发者,对 px .em . rem 应该是再熟悉不过了,但大多数小伙伴应该都和我一样仅仅停留在了解的层面,并不是实质性的掌握它们.本文对三者进行了详细的总结和详细说明, ...

  3. Set Request Header

    第1步 webpack package.json 的 scripts 里的 dev 要新增 --host 0.0.0.0 这样在浏览器里用ip地址代替localhost就能运行了 第2步 在pc浏览器 ...

  4. Oracle SQL存储过程结构、异常处理示例

    -- 存储过程结结构. -- EXCeption不是存储过程必须部分,可以用作本存储过程的异常处理,但如果没有异常处理,出了异常将会终止程序 CREATE PROCEDURE procedure_na ...

  5. Git详细命令

    Git Guidegit的三种方式只在本地使用:将本地仓库上传到Github:下载GitHub上的仓库:1.只在本地使用在Git Bush上输入命令 mkdir git-demo-1 ——创建一个目录 ...

  6. 142-PHP trait的定义和使用

    <?php trait info{ //定义trait static function getinfo(){ return '这是一个'.__CLASS__.'类.<br />'; ...

  7. Assignment写作谨慎学术抄袭是关键

    学术写作(Academic Writing)作为留学生涯的“必修课”,总是让闻者叹气,抓耳挠腮.初入课堂的留学生,更是缺乏写作经验不知从何下笔,只想仰天长啸“Essay真的好难啊!!”面对一个Essa ...

  8. Flink 笔记(一)

    简介 Flink是一个低延迟.高吞吐.统一的大数据计算引擎, Flink的计算平台可以实现毫秒级的延迟情况下,每秒钟处理上亿次的消息或者事件. 同时Flink提供了一个Exactly-once的一致性 ...

  9. tkinter中控件menu的两种组织方法

    tkinter中,菜单控件组织方法有两种,使用中常出现混淆,为明晰各个正确用法,特整理撰写此博文.菜单控件的组织实际上是通过一个“母菜单”和“子菜单”构成,“母菜单”一方面与master连接(即与依附 ...

  10. 箭头函数this

    箭头函数的this值是由包含它的函数(非箭头函数)来决定的,与包含的函数的this指向一致,如果包裹它的不是函数(直到找到最外层)则this指向全局对象 并且箭头函数的this是固定的,由定义它时所在 ...