Question

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

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

我对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/

上面的链接完全符合我的需要。我认为分享它会很好。

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

1 个答案: