0
点赞
收藏
分享

微信扫一扫

移动端返回顶部

实现功能:

  • 页面滚动某个地方就显示,否则隐藏
  • 点击可以返回顶部

下面详细地说明具体的实现步骤:

① 滚动到某个地方后显示

② 事件:使用scroll页面滚动事件

③ 如果被卷去的头部(window.pageYOffset)大于某个数值

④ 点击返回顶部的图片,使用window.scroll(0, 0)返回顶部

 

/* 返回顶部模块CSS样式 */

.goBack {
display: none;
position: fixed;
bottom: 50px;
right: 20px;
width: 38px;
height: 38px;
background: url(../images/back.png) no-repeat;
background-size: 38px 38px;
}
<!-- 返回顶部模块 -->
<div class="goBack"></div>
<!-- 顶部搜索模块 start -->
<script>
// 返回顶部模块制作
var goBack = document.querySelector('.goBack');
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.pageYOffset >= nav.offsetTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
});
goBack.addEventListener('click', function() {
window.scroll(0, 0);
});
</script>


<!-- 返回顶部模块 -->
<div class="goBack">
</div>
<!-- 顶部搜索模块 start --><script>
// 返回顶部模块制作
var goBack = document.querySelector('.goBack');
var nav = document.querySelector('nav');
window.addEventListener('scroll',
function() {
if (window.pageYOffset >= nav.offsetTop)
{ goBack.style.display = 'block'; } else { goBack.style.display = 'none';
} }); goBack.addEventListener('click', function() { window.scroll(0, 0); });</script>

 

举报

相关推荐

0 条评论