JavaScript实现楼梯滚动特效(jQuery实现) JavaScript实现楼梯滚动特效(jQ

想必大家都用过JD，在它的首页里面有个很常见的特性：就是楼梯特效。
对于程序员的我们，可以说是万物皆可盘。那么，我们就来盘一下它。
先上要实现的效果图：
【JavaScript实现楼梯滚动特效(jQuery实现)】
文章图片

效果功能描述：当点击右侧悬浮的按钮时，点击相应模块，左侧内容区域会自动跳转到该模块区域。
下面，上代码：

Document*{margin:0; padding:0; }li{list-style-type: none; }.top{height:900px; background : #ddd; }.footer{height : 600px; background : #ddd; }.content{height:800px; }.content h1{text-align:center; line-height: 80px; }.stairs-list{width : 60px; position: fixed; right:5%; top:50%; margin-top:-120px; background : #fff; }.stairs-list li{width:50px; height:50px; line-height: 25px; text-align : center; padding:5px; border-bottom:1px solid #ddd; }.stairs-list li.active{color : orangered; }.stairs li span{display: block; } 京东秒杀特色优选频道广场为您推荐
京东秒杀
特色优选
频道广场
为您推荐

现在，我们也能实现跟它一样的功能效果了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。