Прокрутка вверх и анимированная прокрутка до # страницы конфликта конфликта

Итак, я совершенно не знаком с javascript и создаю сайт, на котором я пытаюсь иметь анимированные свитки на странице.Прокрутка вверх и анимированная прокрутка до # страницы конфликта конфликта

Чтобы включить анимированный свиток ссылку Я использую этот код:

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

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

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

Для перехода к верхней части страницы я использую этот код.

//<-- scroll top --> 

var $top = jQuery.noConflict(); 
$top("#scroll-top").hide(); 

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

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

Они оба работают нормально независимо друг от друга, но не вместе. Может ли кто-нибудь помочь мне узнать, почему они конфликтуют, и как разрешить конфликт?

источник

2013-09-16 simonstrumse

Я верю, что в селекторах есть конфликт: '$ ('a [href^=" # "]')' и '$ ('# scroll-top a')' возможно, выбирают одинаковые ссылки, и, следовательно, конфликт – user1

представляет собой рабочий пример для выяснения проблемы. – Gourav

Итак, до того, как я вернулся сюда, мне удалось исправить это, удалив раздел «// прокрутка тела до 0px на клик» кода, поместив идентификатор вверху страницы и используя анимированный свиток (первый код, который я разместил, чтобы прокручивать и вниз, и вверх. Как я уже сказал, я новичок в JS, и это результат копирования паст и проб. Результатом здесь является http://julebord.bedriftsdesign.no/julebord. html. Если вы хотите взглянуть и посмотреть, думаете ли вы, как я это решил, все в порядке. Я был бы признателен. – simonstrumse

Итак, это то, как я исправил мой вопрос:

Я удалил противоречивый код «// прокручивать тело 0px по щелчку» и вместо того, чтобы использовать анимированные прокрутки на якорь ссылки, чтобы оживить оба функций, с помещено вверху страницы.

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

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

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

Я отлично работает, но мне не хватает только одну особенность, что Javascript распознает внутренние ссылки, которые начинаются с чем, чем #. Сейчас он не распознает, например, эту ссылку http://julebord.bedriftsdesign.no/julebord.html#julemeny. Он работает только, если я использую это: #julemeny

источник

2013-09-17 05:45:51 simonstrumse

Прокрутка вверх и анимированная прокрутка до # страницы конфликта конфликта

ответ

Смежные вопросы