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收藏展开与隐藏,返回顶部的更多相关文章

  1. js小效果:返回顶部 scrollTop 。 滚屏:animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  2. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  3. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  4. 原生js实现简洁的返回顶部组件

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

  5. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  6. 弹性返回顶部JS代码

    弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

  7. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  8. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  9. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

随机推荐

  1. 后端程序员之路 8、一种内存kv数据库的实现

    键值(Key-Value)存储数据库,这是一种NoSQL(非关系型数据库)模型,其数据按照键值对的形式进行组织.索引和存储.KV存储非常适合不涉及过多数据关系业务关系的业务数据,同时能有效减少读写磁盘 ...

  2. 如何理解JavaScript中的函数

    转: 如何理解JavaScript中的函数 JS中的函数简介 JS中的函数是一种通过调用来完成具体业务的一段代码块.最核心的目的是将可重复执行的操作进行封装,然后供调用方无限制的调用. JS中的函数的 ...

  3. 在Asp.Net Core 5 中使用EF Core连接MariaDB

    升级到Asp.Net Core 5,使用EF Core连接MariaDB,使用的Nuget包Pomelo.EntityFrameworkCore.MySql也升级到了5.0.0-alpha.2,然后发 ...

  4. 漫漫Java路1—基础知识3—数据类型和变量作用域以及常量

    强类型语言 所有变量定义后才能使用,区别于js等弱类型语言 数据类型分类 基本类型(primitive type) 引用类型(reference type) 整数类 byte:占1字节 short:占 ...

  5. Apache配置 9.访问控制-Diretory\FileMatch

    (1)介绍 访问控制限制白名单IP,针对文件和目录. (2)目录配置 #vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf <Virtua ...

  6. ApiTesting全链路接口自动化测试框架 - 新增数据库校验(二)

    在这之前我完成了对于接口上的自动化测试:ApiTesting全链路接口自动化测试框架 - 初版(一) 但是对于很多公司而言,数据库的数据校验也尤为重要,另外也有小伙伴给我反馈希望支持. 所以最近几天我 ...

  7. Vue 插槽之插槽内容学习总结

    插槽内容使用方法介绍 父组件中引用支持插槽内容的子组件,形如以下(假设子组件为NavigationLink.vue) <navigation-link url="/profile&qu ...

  8. HTTP 状态码(转载)

    本文由 简悦 SimpRead 转码, 原文地址 www.cnblogs.com HTTP 状态码 (HTTP Status Code) 状态码并不是每个都有,为了后期扩展.[update201705 ...

  9. python之pillow模块学习--验证码的生成和破解

    一.基础学习 在Python中,有一个优秀的图像处理框架,就是PIL库,pip install pillow 示例1 from PIL import Image # 读取当前图片 im = Image ...

  10. CentOS 7 卸载 OpenJDK 安装 OracleJDK

    查看 JDK 安装版本 java -version java version 1.7.0_51 OpenJDK Runtime Environment ( rhel-2.4.5.5.el7-x86_6 ...