Конфликт между двумя JavaScript. Плавная прокрутка между якорями и обратно

Question

Конфликт между двумя JavaScript. Плавная прокрутка между якорями и обратно

0

У меня есть два 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>

Mikerai 19 сен. 2013, в 02:33

Источник

Теги:

javascript

html

scroll

conflict

1 ответ

Ещё вопросы

Mikerai · Answer 1 · 2013-09-19T12-47-00.000Z

Я пришел с решением для дальнейших исследований.

Я объединил оба сценария в полностью функциональный:

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

Ссылка выше делает именно то, что мне нужно. Я думаю, было бы неплохо поделиться им.