Блог

Я использую 2 скрипта, найденных в Интернете, один для плавной прокрутки до DIV в нижней части страницы, а другой для плавной прокрутки «Назад к началу». Проблема в том, что существует конфликт между обоими, и поэтому «возврат к началу» не работает (нет возврата к началу при нажатии). При независимом использовании они оба работают отлично.

Как я мог бы «объединить» их оба в один скрипт? (и сохранить эффект постепенного исчезновения сценария возврата к началу) Смотрите http://jsfiddle.net/GjsVq/1 /

Большое спасибо

 $(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;
        });
    });
});


$(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });

    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
  

$('a[href^="#"]').on(... выбирает оба <a> элемента. Один из подходов заключается в том, чтобы либо переписать этот селектор, чтобы соответствовать только <a> элементам, которые должны вызывать прокрутку вниз (возможно, использовать для этого класс CSS?)

Альтернативным быстрым и грязным решением было бы сбросить обработчики событий в элементе «возврата к началу» перед подключением его собственного обработчика щелчков: jQuery('.back-to-top').off().click(...

Обычно я просто использую одну функцию плавной прокрутки, а затем устанавливаю свою кнопку «перейти к началу» с помощью href =»#idOfHighestElementOnPage». Это функция плавной прокрутки (которая может включать в себя что-то полезное, если вы не хотите идти тем же путем, что и я):

 $(function () {
$('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') amp;amp; location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name='   this.hash.slice(1)   ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - 100
            }, 'normal');
            return false;
        }
    }
});
})

window.onscroll = scrollFunction;
function scrollFunction() {
    var doc = document.documentElement, body = document.body;
    var top = (doc amp;amp; doc.scrollTop  || body amp;amp; body.scrollTop  || 0);
    if (top > 200) {
        $('.back-to-top').fadeIn();
    }
    else {
        $('.back-to-top').fadeOut();
    }
}