Question

我最近一直试图了解jQuery是如何工作的以及如何使用它，并且我将两个不同教程中的脚本放在一起。一个向下滚动页面到标记的部分，另一个向上滚动它，当点击一个回到顶部的图标时（一旦页面向上滚动，图标消失）。问题是这些脚本中的每一个都可以正常工作，但是当与其他脚本放在一起时会出现问题并且脚本的某些部分不会被执行（取决于代码中脚本的顺序）。请问任何人，向我解释有什么问题吗？正如我所说的，我没有在任何项目上工作，所以我不需要一个可以帮助我继续前进的现成解决方案 - 我只是想了解这一切是如何工作的以及是什么导致这样的冲突。非常感谢你的帮助，并且对于不够具体而感到抱歉！

以下是脚本：

    <script>
    $(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn(); } 
            else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

    });
    </script>

    <script>
        $(document).ready(function(){
        $('a[href^="#"]').on('click',function (e) {
            e.preventDefault();

            var target = this.hash;
            var $target = $(target);

            $('body,html').stop().animate({
                'scrollTop': $target.offset().top
                }, 900, 'swing', function () {
                    window.location.hash = target;
        });
    });
    });
    </script>

两个冲突的jquery脚本

0 个答案: