javascript - 两个javascript之间的冲突。在锚点之间平滑滚动并返回顶部

Question

我的单页网站上有两个 javascript。一个用于平滑滚动，另一个用于“返回顶部”。当我测试我的网站时，只有其中一个脚本有效（第一个调用的那个）。

是否可以将两个脚本合并为一个？或者如何使两个脚本运行时没有冲突？

我不太了解 jQuery 或 javascript，所以我对 .noconflict 方法不是很熟悉。

预先感谢您帮助我。

这是我的代码：

<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> 

    var $root = $('html, body');

        $('a').click(function(){
        $root.animate({
            scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
                }, 800);
                return false;
            });

    </script>

Answer 1

我提出了一个解决方案来做进一步的研究。

我已将两个脚本合并为一个功能齐全的脚本：

<script>

    $(document).ready(function(){
        $('a.anchor').click(function(){
           var anchorAttr = $(this).attr('data-title');
           var anchorPos = $('#' + anchorAttr).offset().top;

           $('html,body').stop().animate({scrollTop: anchorPos});
        });

       var backtoTop = $('.control a.backtotop');
       backtoTop.hide();  

       $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    backtoTop.fadeIn();
                } else {
                    backtoTop.fadeOut();
                }
            });

        backtoTop.click(function (e) {
            e.preventDefault();
            $('body,html').stop().animate({
                    scrollTop: 0
                }, 900);

        });

    });

这是我正在寻找的解决方案的链接：http: //jsfiddle.net/RmyxK/5/

上面的链接正是我需要的。我认为分享它会很好。