移动端返回顶部

时间:2022-07-26
本文章向大家介绍移动端返回顶部，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

当页面滚动某个地方，就显示返回顶部图标，否则隐藏

点击可以返回顶部

实现代码跟pc端一致

案例分析：

  1. 滚动某个地方显示
  2. 事件：scroll页面滚动事件 
  3. 如果被卷去的头部（window.pageYOffset ）大于某个数值
  4. 点击，window.scroll(0,0) 返回顶部 
//返回顶部模块制作
var goBack = document.querySelector( '.goBack' );
var nav = document.querySelector( 'nav');
window.addEventListener( 'scrol1', function() {
    if (window.pageYoffset >= nav.offsetTop) {
        goBack.style.display = 'block' ;
    } else {
        goBack.style.display = 'none';
    }
});
goBack.addEventListener( 'click', function() {
    window. scro11(0, 0);
})

随机文章
本站知识点必读
最近更新