实现功能:
- 页面滚动某个地方就显示,否则隐藏
- 点击可以返回顶部
下面详细地说明具体的实现步骤:
① 滚动到某个地方后显示
② 事件:使用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>