js原生实现楼梯滚动效果

在开发过程中可能会遇到这种场景有点类似经京东楼梯的效果那样，点击按钮然后跳转到对应区域，还记得当初学习js的时候遇到这种东西，完全不知道怎么做？用定位吗显然不是，后来知道仅仅三行到四行代码就解决了，

一般来说有两种方法一个是用插件，一个是原生实现，如果使用vue开发，会用到 better-scrooll插件

github地址：https://github.com/ustbhuangyi/better-scroll

参考链接：http://www.cnblogs.com/chenlw/p/9720208.html |||https://blog.csdn.net/guochao8/article/details/85225080

第二种方法是用原生实现

let current = document.getElementsByClassName("current").offsetTop-50;//偏移量是50/***  document.body.scrollTop:网页被卷去的高(也就是滚动到哪里的位置)*  window.scrollY:返回文档当前垂直滚动的像素数*  document.documentElement.scrollTop:获取当前页面的滚动条纵坐标位置* @type {number}*/document.body.scrollTop = window.scrollY=document.documentElement.scrollTop=current;

js原生实现楼梯滚动效果相关推荐

【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
分别用marquee和div+js实现首尾相连循环滚动效果
分别用marquee和div+js实现首尾相连循环滚动效果,特效代码非常精简,仅3行实现! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...
html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码
图片横向滚动代码 .box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } .b ...
js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JS实现新闻播报滚动效果
效果图 1. 横向滚动播报 2. 纵向滚动播报横向滚动 <template><div class="wrapper"><div cl ...
JS实现图片无缝滚动效果
首先,借助一张草图来简单说明一下往左移动的做法(往右相同). 如上图所示,图片的无缝滚动原理其实是把滚动的图片复制成两份并联排列,当滚动完一次后就把图片扯回到起点,重新滚动.这里的往左运动把图片扯回起 ...
老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...

js原生实现楼梯滚动效果

一般来说有两种方法一个是用插件，一个是原生实现，如果使用vue开发，会用到 better-scrooll插件

github地址：https://github.com/ustbhuangyi/better-scroll

js原生实现楼梯滚动效果相关推荐

最新文章

热门文章

js原生实现楼梯滚动效果

一般来说有两种方法 一个是用插件，一个是原生实现，如果使用vue开发，会用到 better-scrooll插件

github地址：https://github.com/ustbhuangyi/better-scroll

js原生实现楼梯滚动效果相关推荐

最新文章

热门文章

一般来说有两种方法一个是用插件，一个是原生实现，如果使用vue开发，会用到 better-scrooll插件