服务热线 400-660-8066

珠海网站建设
首页 站内资讯

珠海网站建设

站内资讯
珠海网站建设 / 站内资讯 / 行业资讯 / 正文

网站前端制作上下滚动效果(按钮控制)

来源: All文章
发布时间:2023-04-27 16:01:34

  在网站制作中,首页一般都会有新闻推荐列表之类的,页面布局时,新闻列表给的区域大小不够或者预估以后上传内容很多,这时前端人员需要做出隐藏多出的内容上下滑动显示剩余的内容,前端人员做出这样的效果时,就会出现滚动条影响美观,一般我们会隐藏掉滚动条,但这样又不突出这里的内容时可以上下滚动的,所以需要有上下两个按钮来提示我们这里是可以做上下滚动显示其内容的。

  效果图如下:如图所示左边写了个类似新闻的列表,默认显示3个,右边是控制其上下的两个按钮。

  HTML图如下:JS图如下:

  通过varscroll=$(.quick-links.roll).height()获取外层的高度,这个高度是先设定好的,也就是显示的区域高度,然后varscroll_Ul=$(.quick-links.rollul).height()获取实际内容的高度,就是每一条新闻列表加起来的总高度,通过if判断当前的内容总高度有没有大于显示区域的高度(没有大于显示区域的高度就不用滚动显示了),当大于显示高度时,点击往下按钮,通过varscroll_Top=$('.quick-links.roll').scrollTop()获取varscroll_Ul顶部距离scroll顶部的距离,scroll_Top=scroll_Top+44这个值是每次点击往下按钮所累加的值,因为这里列表每一条的高度是44,所以每次加44,最后通过animate动画来滚动。往上按钮也是一样的道理。

  滚动的效果如图:

* 文章来源于网络,如有侵权,请联系客服删除处理。
在线 咨询

添加动力小姐姐微信

微信 咨询

电话咨询

400-660-8066

我们联系您

电话 咨询
微信扫码关注动力小姐姐 X
qr