js返回顶部小Demo
<style>
.divH {
height: 1800px;
}
.divT {
width: 50px;
height: 50px;
font-size: 18px;
background-color: #2F4F4F;
text-align: center;
color: white;
position: fixed;
right: 18px;
bottom: 18px;
}
.divT:hover{
cursor: pointer;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="divH"></div>
<div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div> <script src="./jq/jquery-1.9.1.min.js"></script>
<script>
window.onscroll = function () {
var current = $(window).scrollTop();
if (current > 180){
$(".divT").removeClass("hide");
}else {
$(".divT").addClass("hide");
}
}; function ReturnTop() {
$(window).scrollTop(0);
}
</script>
网页右下角有个返回顶部按钮,模仿淘宝?window.scrollTop()方法
js返回顶部小Demo的更多相关文章
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- JS 带运动的返回顶部 小案例
带运动的返回顶部:当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器.下面的方法b 就是清掉的方法 <!DOCTYPE html PUBLIC "-//W3C//D ...
- 原生js返回顶部(匀速、由快到慢)
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- js返回顶部
1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...
- 原生JS返回顶部,带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
- js 返回顶部
<script> window.onload = function(){ var oTop = document.getElementById("to_top"); v ...
- Asp.Net Mvc+Angular.Js自测小Demo
参考:http://www.cnblogs.com/eedc/p/6082052.html 一.引用anguler: 1.angular.js 2.angular-route.js 3.app.js ...
随机推荐
- shell根据系统当前的时间向用户输出问候信息
- 【串线篇】Mybatis缓存简介
缓存:暂时的存储一些数据:加快系统的查询速度... CPU: 主频:4-2.7GHZ 内存:4G-8G 1333MHZ 2166MHZ CPU:一级缓存(4MB):二级缓存 (16MB); ...
- python-zmail发送邮件
import zmail #发送测试报告到邮件 with open(r'F:\asus\auto_file\unittest_html\2019-06-30 10-31-03report.html', ...
- 07.整合jsp、整合freemarker、整合thymeleaf
整合jsp pom.xml部分内容 <packaging>war</packaging> </dependencies> <dependency> &l ...
- 【leetcode】553. Optimal Division
题目如下: 解题思路:这是数学上的一个定理.对于x1/x2/x3/..../xN的序列,加括号可以得到的最大值是x1/(x2/x3/..../xN). 代码如下: class Solution(obj ...
- leetcode-167周赛-1290-二进制链表转整数
题目描述: 提交: # Definition for singly-linked list. # class ListNode: # def __init__(self, x): # self.val ...
- APP前置代码
APP自动化前置代码: #导入包from appium import webdriverimport timedesired_caps = {}desired_caps['platformName'] ...
- 命令查看当前运行APP的包名和Activity
先用usb链接手机 启动要查看的程序,命令查看当前运行的包名和Activity更清晰. 使用adb shell dumpsys window | findstr mCurrentFocus 命令查看 ...
- php rtrim()函数 语法
php rtrim()函数 语法 rtrim()函数怎么用? php rtrim()函数用于删除字符串右边的空格或其他预定义字符,语法是rtrim(string,charlist),返回经过charl ...
- 2017 山东一轮集训 Day2 Shadow (三维凸包点在面上投影)
在三维坐标中,给定一个点光源,一个凸多面体,以及一个平面作为地面. 求该凸多面体在地面上阴影的面积. 这三个点共同确定了一个平面,这个平面就是地面.保证这三个点坐标互异且不共线.前三行每行三个实数,每 ...