在网站制造中,首页通俗城市有音讯推举列表之类的,页面机关时,音讯列表给的地区巨细不敷或预估以后上传内容良多,这时候前端职员必要做出潜匿多出的内容凹凸滑动浮现残剩的内容,前端职员做出如许的成就时,就会浮现滚动条影响雅观,通俗我们会潜匿掉滚动条,但如许又不凸起这里的内容时能够凹凸滚动的,以是必要有凹凸两个按钮来提示我们这里是能够做凹凸滚动浮现其内容的。
成就图以下:
如图所示左侧写了个雷同音讯的列表,默许浮现3个,右侧是节制其凹凸的两个按钮。
HTML图以下:
JS图以下:
经由过程“var scroll = $(".quick-links .roll").height()”获得外层的高度,这个高度是先设定好的,
响应式网页设计公司,也就是浮现的地区高度,然后“var scroll_Ul = $(".quick-links .roll ul").height()”获得理论内容的高度,就是每条音讯列表加起来的总高度,经由过程if断定以后的内容总高度有没有大于浮现地区的高度(没有大于浮现地区的高度就不消滚动浮现了),当大于浮现高度时,点击往下按钮,经由过程“var scroll_Top = $('.quick-links .roll').scrollTop()”获得var scroll_Ul顶部距离scroll顶部的距离,“scroll_Top = scroll_Top + 44”这个值是每次点击往下按钮所累加的值,因为这里列表每条的高度是44,以是每次加44,最后经由过程animate动画来滚动。往上按钮也是一样的事理。
滚动的成就如图: