js 返回顶部
<script>
window.onload = function(){
var oTop = document.getElementById("to_top");
var screenw = document.documentElement.clientWidth || document.body.clientWidth;
var screenh = document.documentElement.clientHeight || document.body.clientHeight;
oTop.style.left = screenw - oTop.offsetWidth +"px";
oTop.style.top = screenh - oTop.offsetHeight + "px";
window.onscroll = function(){
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
}
oTop.onclick = function(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}
} </script>
<div id="to_top">返回顶部</div>
js 返回顶部的更多相关文章
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 原生js返回顶部(匀速、由快到慢)
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- 原生JS返回顶部,带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
- js返回顶部小Demo
<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...
- js返回顶部
1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...
- 原生js返回顶部
let backToTop = function() { let scrollToptimer = setInterval(function() { let top = document.body.s ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
随机推荐
- MFC如何设置窗口最前
首先,放到最前 this->SetWindowPos(&wndTopMost,0,0,0,0,SWP_NOMOVE|SWP_NOSIZE);//使窗口总是在最前面 this->Se ...
- yum升级php版本
查看当前 PHP 版本 1 php -v 查看当前 PHP 相关的安装包,删除之 1 2 3 4 5 yum list installed | grep php yum remove php ...
- li标签和checkbox绑定
参考原文:https://www.cnblogs.com/youxin/p/3885496.html 我们经常需要li或span包含一个checkbox,不管点击checkbox或li都会触发相应的事 ...
- python 调用exe程序
#!/usr/bin/python #-*- coding:utf-8 -*- import os, subprocess import tkMessageBox import msg_box def ...
- Java代码的编译和执行
Java代码编译和执行的整个过程包含了以下三个重要的机制: (1)Java源码编译机制 (2)类加载机制 (3)类执行机制 1.Java代码编译是由Java源码编译器来完成,流程图: Java 源码编 ...
- Linux部署Web项目小记
1.安装Tomcat 官网下载 解压缩:tar -zxvf apache-tomcat-8.0.32.tar.gz 配置server.xml 连接池: <Executor name=" ...
- Java设计模式之策略模式(Strategy Pattern)
简介 策略模式定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 组成 1.抽象策略角色(Strategy): 策略类,通常由一个接口或者抽象类实现. 2.具 ...
- heroku安装(win7x64)
Jdk安装:官网地址 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html下载要安装的jdk版本. ...
- 绑定IP 绑定设备
首先引别人的组播测试如下 1. 一个udp client可以同时往多个组播地址发送数据,多个udpclient可以同时往一个组播发数据. 2. 本地udp必须监听组播端口,否则收不到数据.3. 一个u ...
- manacher模板整理
//p[]为最长回文半径长度,id为当前最靠右端回文串的中心点(多个取最靠左),mx为id对应的回文串的最右端坐标+1void manacher(char *s,int len){ p[] = ; , ...