JQ-监听页面竖直方向滚动,显示'回到顶部'按钮

实现监听 页面在竖直方向的滚动,并触发显示回到顶部按钮, 点击按钮页面滚动回页面顶部

====JQ====
var offset = 200; // 显示back-to-top
var offset2 = 430; // 显示contact-us
var duration = 500;
$(window).scroll(function() {
    if ($(this).scrollTop() > offset) {
        $('.back-to-top').fadeIn(400);
    } else {
        $('.back-to-top').fadeOut(400);
    }

    if ($(this).scrollTop() > offset2) {
        $('.contact-us-right').fadeIn(400);
    } else {
        $('.contact-us-right').fadeOut(400);
    }
});

// 点击回到顶部
$('.back-to-top').on('click',
function(event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: 0
    },
    600);
    return false;
});

====html==== 
<html>
 <body>
  <!-- 返回顶部 --> 
  <a href="#" class="back-to-top"> <img src="/img/contact-us-right/back-to-up.png" alt="" /> </a>
 </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容