js收藏展开与隐藏,返回顶部
var a = document.getElementById("more");
var b = document.getElementById("moreList");
var c = document.getElementById("MOREall");
a.onclick = function(){
c.style.display="block";
b.style.display="block";
a.style.display="none";
};
// 动画效果
var timer = null;
b.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
};
// 直接回到顶部
// b.onclick = function () {
// var top = document.body.scrollTop || document.documentElement.scrollTop;
// scrollBy(0,-top)
// };
js收藏展开与隐藏,返回顶部的更多相关文章
- js小效果:返回顶部 scrollTop 。 滚屏:animate
返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 弹性返回顶部JS代码
弹性返回顶部JS代码 弹性返回顶部JS代码点击下载
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
随机推荐
- ElasticSearch 集群的规划部署与运维
公号:码农充电站pro 主页:https://codeshellme.github.io 1,常见的集群部署方式 ES 有以下不同类型的节点: Master(eligible)节点:只有 Master ...
- Kubernetes - Kubelet TLS Bootstrapping
一.简单说明 写这个的初衷是自己搜索TLS Bootstrapping的时候没有搜到自己想要的东西,因为TLS Bootstrapping经过很多版本之后也发生了一些变化,所以网上很多也是老的内容了. ...
- 记录PHP post提交表单导入mysql中文乱码的问题
记录记录PHP post提交表单导入mysql中文乱码的问题 关于乱码,这是个糟糕的问题!涉及到很多地方 解决思路:程序所涉及的环境字符集不一致导致 mysql出现乱码一般是mysql数据库内部的字符 ...
- 十一. SpringCloud Alibaba
1. SpringCloud Alibaba简介 1.1 为什么会出现SpringCloud Alibaba Spring Cloud Netflix项目进入到维护模式 什么是维护模式?=> 将 ...
- SHELL编程概念&变量剖析
一.shell软件概念和应用场景 1) 学习Linux技术,不是为了学习系统安装.命令操作.用户权限.配置IP.网络管理,学习Linux技术重点:基于Linux系统部署和维护各种应用软件.程序(Apa ...
- WBX24T2X CPEX国产化万兆交换板
WBX24T2X是基于盛科CTC5160设计的国产化6U三层万兆CPEX交换板,提供24路千兆电口和2路万兆光口,采用龙芯 2K1000处理器.支持常规的L2/L3协议,支持Telnet.SNMP ...
- pyspider的环境安装
第一:确认自己的Python版本3.6.x(因该版本与pyspider较为适应,其他版本易出错) 如果不是3.6版本的,且想将版本替换成3.6版本的有以下处理方法: 1.再装一个3.6版本python ...
- Android应用程序的进程创建过程
目录 前言 步骤 step1 Ams发起请求startProcessLocked step2 Zygote收到请求 step3 handleChildProc -- 进入子进程的世界 step4 Ru ...
- windbg安装pykd记录
https://githomelab.ru/pykd/pykd 1.安装python (坑,分x86和x64,对应windbg版本) 2.安装pykd:'pip install pykd' 3.安 ...
- MySQL Order BY 排序过程
MySQL 在进行 Order By 操作排序时,通常有两种排序方式: 全字段排序 Row_id 排序 MySQL 中每个线程在执行排序时,都会被分配一块区域 - sort buffer,它的大小通过 ...