【原创】jQuery 实现返回顶部按钮显示及动态 JS 效果

HTML

 <div id="back-container">
     <button class="back-btn">
     <img src="./images/icon-back.png"/>
     顶部
     </button>
 </div>

CSS

#back-container {
  margin-top: 15px;
  display: none;
}

JS

    $(window).scroll(function() {
        if($(window).scrollTop() > 300) $('#back-container').fadeIn(300);
        else $('#back-container').fadeOut(200);
    });
    $(function () {
        $(".back-btn").click(function() {
            $("body , html").animate({scrollTop:0}, 300);   //300是所用时间
        });
    })
点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注