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

Итак, я новичок в 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;
});

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


javascript jquery smooth-scrolling scrolltop
person simonstrumse    schedule 16.09.2013    source источник
comment
Я считаю, что в селекторах есть конфликт: $('a[href^="#"]') и $('#scroll-top a'), возможно, выбирают одни и те же ссылки и, следовательно, конфликт   -  person user1    schedule 16.09.2013
comment
предоставить рабочий пример, чтобы выяснить проблему.   -  person Gourav    schedule 16.09.2013
comment
Хорошо, поэтому, прежде чем я вернулся сюда, мне удалось исправить это, удалив // тело прокрутки до 0 пикселей в разделе кода клика, поместив идентификатор вверху страницы и используя анимированную прокрутку (первый блок кода, который я опубликовано, для прокрутки вниз и вверх. Как я уже сказал, я новичок в JS, и это результат копирования и проб. Результат здесь julebord.bedriftsdesign.no/julebord.html. Если вы хотите взглянуть и посмотреть, считаете ли вы, что способ, которым я решил, в порядке, я был бы признателен.   -  person simonstrumse    schedule 16.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Итак, вот как я исправил свою проблему:

Я удалил конфликтующий код "// прокрутить тело до 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

person simonstrumse    schedule 17.09.2013