jquery实现返回顶部动画

最新推荐文章于 2022-07-15 16:29:45 发布

没心没肺可苦可乐

最新推荐文章于 2022-07-15 16:29:45 发布

阅读量468

点赞数

本文链接：https://blog.youkuaiyun.com/qq_17492249/article/details/88889905

版权

本文详细介绍了如何使用JavaScript实现页面滚动监听，并在滚动超过100px时显示返回顶部按钮，点击按钮平滑滚动回页面顶部。通过jQuery简化DOM操作，实现优雅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<a href="javascript:;" class="gotop" id="scroll" sty>返回顶部</a>
<script type="text/javascript">
                $(function(){
                    showScroll();
                    function showScroll(){
                        $(window).scroll( function() { 
                            var scrollValue=$(window).scrollTop();
                            scrollValue > 100 ? $('.gotop').fadeIn():$('.gotop').fadeOut();
                        } );    
                        $('#scroll').click(function(){
                            $("html,body").animate({scrollTop:0},500);  
                        }); 
                    }
                })
            </script>