jq回到顶部加完动画之后滚动条失效？_jq为什么添加了点击返回顶部效果之后不能再次对页面进行滑动-优快云博客

本文链接：https://blog.youkuaiyun.com/clear_code/article/details/102701737

在使用jQuery实现页面返回顶部功能并添加动画效果后，可能会遇到滚动条失效的问题。这通常是由于动画执行期间对滚动条的控制不当导致的。要解决这个问题，可以检查并调整CSS样式，确保在动画执行完毕后正确恢复滚动条功能。

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

		回到顶部这个功能完成的时候，回到顶部的动画效果好用了，但是在往下滑动滚动条的时候，发现滚动条不好用了，
	只需要把点击事件写在外面就可以解决这个问题；
		下面代码复制就可以查看效果；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    html,
    body {
        height: 3000px;
        /* 模拟滚动条，可用来验证代码准确性；实际不需要此代码； */
    }

    .business_foot {
        width: 100px;
        height: 100px;
        background: pink;
        border-radius: 50%;
        position: fixed;
        bottom: 20px;
        right: 50px;
    }
</style>

<body>
    <div class="business_foot">

    </div>
</body>

</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    function TopBack() {
        this.top = $(".business_foot");
        this.init();
    }
    TopBack.prototype = {
        init() {
            this.back();
            // this.clickBack();
        },
        back() {
            $(document).on('scroll', $.proxy(this.backCb, this))
        },
        backCb() {
            var scroll = $(document).scrollTop();
            if (scroll > 300) {
                this.top.css("display", 'block');
                 /*   this.top.on('click',function(){
                   		$('body,html').animate({ scrollTop: 0 }, 1000);
                   		当点击事件写在这里的时候，就会出现回到顶部这个小功能出现滚动条失效的问题；
                   		只需要把这条代码拆出去就可以了；
                })*/
            } else {
                this.top.css("display", 'none')
            }
        },
        clickBack() {
            this.top.on('click', $.proxy(this.clickBackCb, this))
        },
        clickBackCb() {
            $('body,html').animate({ scrollTop: 0 }, 1000);
        }
    }
    new TopBack();

</script>