回到顶部
<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. Nifi简介及核心概念整理

    简介 Apache NiFi 是一个易于使用.功能强大而且可靠的数据拉取.数据处理和分发系统,用于自动化管理系统间的数据流. 它支持高度可配置的指示图的数据路由.转换和系统中介逻辑,支持从多种数据源动 ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-repeat

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. Eclipse新建Maven中创建src文件夹报The folder is already a source folder错误解决办法

    问题: 解决办法:右击项目->Build Path->Configure Build Path选择(missing)文件夹remove,然后重新New Source Folder

  4. Rails 第一课:环境配置 Ruby Rails RVM Heroku

    安装 上传专案到 Heroku 安装 Ruby 2.3.1 Rails 5.0.0.1 RVM 1.27.0 比较幸运一个问题都未碰到 MacOS 10.12.1 配置完成系统顺利升级到10.12.2 ...

  5. USB Windows驱动 音频解决方案芯片DP108

    DP108是一款完全替代CM108的高度集成的单芯片USB音频解决方案芯片.方便的USB即插即用的兼容性,用户可以快速创建易用性,高质量和便携式USB音频产品基于高度集成的单芯片解决方案.所有重要的模 ...

  6. [洛谷Luogu]P1141 01迷宫[联通块 并查集]

    题目链接 大致题意 相邻格子不同为连通,计算每个点所在的连通块大小. 想法 我采用了并查集的做法. 开一个辅助数组记录连通块大小,每次合并的时候更新父亲节点的大小即可. 一个点先与它上面的点判定,若判 ...

  7. 爬虫(十七):Scrapy框架(四) 对接selenium爬取京东商品数据

    1. Scrapy对接Selenium Scrapy抓取页面的方式和requests库类似,都是直接模拟HTTP请求,而Scrapy也不能抓取JavaScript动态谊染的页面.在前面的博客中抓取Ja ...

  8. mitmproxy(TLS错误)

    一.原来的基础上添加代码 """ This inline script allows conditional TLS Interception based on a us ...

  9. segger rtt 输出 log

    调试 mcu 的时候,使用 jlink 的 rtt 可以方便的输出信息. 输出有两种模式, client 和 logger. client 必须依附其他程序,比如说 mdk 调试状态,或者 logge ...

  10. 转载:HTTP 请求头中的 X-Forwarded-For

    本文转自:https://www.jianshu.com/p/15f3498a7fad X-Forwarded-For和相关几个头部的理解 $remote_addr    是nginx与客户端进行TC ...