html页面滚动到一定位置显示回到顶部按钮
2018-10-10 16:50
190 查看
回到顶部按钮在很多页面中都会用到,具体实现效果如下:
当页面滚动到一定位置时,页面右下侧出现固定按钮:
当鼠标移到按钮上方时,有一定的动画效果:
<div class="t-right-bar"> <div class="t-bar-support" data-open-online-form><a href="index.php?a=support&c=html">技术支持</a></div> <div class="t-bar-rocket" id="back-to-top">返回顶部</div> </div>[/code]
.t-right-bar { position: fixed; right: 0; bottom: 10%; width: 48px; height: 48px; z-index: 1000; cursor: pointer; } .t-right-bar > div { float: left; height: 36px; margin-bottom: 1px; border-radius: 20px 0 0 20px; color: #fff; padding-left: 100%; clear: both; white-space: nowrap; font-size: 13px; line-height: 36px; font-style: normal; background-color: #aaa; background-repeat: no-repeat; background-position: 12px center; transition: transform .2s cubic-bezier(.215, .61, .355, 1), padding .2s cubic-bezier(.215, .61, .355, 1), margin .2s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.215, .61, .355, 1) } .t-right-bar > div.active, .t-right-bar > div:hover { transform: translateX(-100%); padding-left: 45px; padding-right: 10px; margin-left: 48px; background-color: #23a0e1; text-decoration: none; color: #fff } .t-right-bar .t-bar-support { background-image: url(../img/icon/support_1.svg); //按钮图标 background-position: 14px center; } .t-right-bar .t-bar-rocket { background-image: url(../img/icon/rocket_1.svg); //按钮图标 background-position: 19px center; } .t-bar-support a{ color: white; } .t-bar-support a:hover{ color: #fff }[/code]
$(".t-right-bar").hide(); $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $(".t-right-bar").fadeIn(500); } else { $(".t-right-bar").fadeOut(500); } }); $("#back-to-top").click(function () { $('body,html').animate({scrollTop: 0}, 100); return false; }); });阅读更多
相关文章推荐
- listview下拉到一定位置显示回到顶部按钮
- listview下拉到一定位置显示回到顶部按钮
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- JQ:当页面滚动到一定位置之后,让元素固定在顶部,小于位置后恢复原来的位置
- 页面滚动到一定位置后 元素滑出显示
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- js实现html页面滚动条向下拉到一定的程度时,某个div就固定在顶部,向上拉时返回原位置。
- 回到顶部,当页面下拉到一定高度时,就会出现回到顶部的按钮,点击回到顶部之后,会有一个速度的变化回滚到顶部,如果正在回到顶部时,鼠标的滚轮转动了就会停止回到顶部
- jquery左边浮动到一定位置时显示返回顶部按钮
- 不随页面滚动的回到顶部按钮
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- html页面“回到顶部”按钮
- jquery实现当页面滚动超过一屏时显示返回顶部按钮
- HTML+JS之点击按钮滚动到页面指定位置
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
- Angular封装指令回到顶部以及滚动到特定的页面位置
- Angular 回到顶部 滚动到特定的页面位置
- js控制”回到顶部“按钮滚动一屏后再显示和滚动条平滑滚动
- jquery左边浮动到一定位置时显示返回顶部按钮
- html页面标记 点击目录跳转到页面相应位置 简易回到顶部