Не срабатывает плавный переход по якорной ссылке

Тема в разделе "JavaScript", создана пользователем AlexGood, 26 май 2018.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Не срабатывает плавный переход по якорной ссылке, а только резко.
    http://testbcard.bootstrap.dtraduga.vh55.hosterby.com/index.php
    При нажатии пункта меню О ПРОГРАММЕ резко переходит к разделу, а не плавно.

    Код:
    $(document).ready(function(){
        $("#collapsibleNavbar").on("click","a", function (event) {
            //отменяем стандартную обработку нажатия по ссылке
            event.preventDefault();
     
            //забираем идентификатор блока с атрибута href
            var id  = $(this).attr('href'),
     
            //узнаем высоту от начала страницы до блока на который ссылается якорь
                top = $(id).offset().top;
          
            //анимируем переход на расстояние - top за 1500 мс
            $('body,html').animate({scrollTop: top}, 1500);
        });
    });
    Используется - jquery/3.3.1/jquery.min.js

    В чем косяк JS?
     
    Последнее редактирование: 26 май 2018
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.558
    Симпатии:
    1.472
    этот код работает нормально. плавный переход работает, проверял в FF.

    только я навешивал это событие (код) сам, через консоль. т.к. у вас ошибка в коде на 60 строке. откройте консоль браузера, перезагрузите страницу и увидите что за ошибка
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Да так и есть: http://joxi.ru/GrqgoOOHQ3jlE2
    Только непонятно из-за чего? И самое интересное ошибка совсем в другом блоке, не относящемуся к плавному переходу. Это ошибка в блоке с открывающимся меню выбора городов.
     
  4. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.558
    Симпатии:
    1.472
    проблема в том, что так работает js. Файл загрузился и исполняется всё, если где-то встречается ошибка - обработка заканчивается на этой строке.
     
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    т.е. если я этот блок с ошибкой перенесу в самый низ, то по сути переход должен заработать?
    заработало, когда закомментировал эти строки с ошибками в обоих меню...
    теперь все плавно переходит
     
    Последнее редактирование: 26 май 2018
  6. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.558
    Симпатии:
    1.472
    а исправить её не вариант? :Biggrin:

    p.s. да, ошибка просто будет ниже
     
    AlexGood нравится это.
  7. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    а как-то иначе можно переписать этот код?
    Код:
    icon.addEventListener("click",activeMenu);
    у меня просто еще не такие великие познания в js как у вас - я только учусь
     
  8. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.558
    Симпатии:
    1.472
    ну так проблема в том, что элемента такого нет:
    Код:
    var icon = document.getElementById("select_city_new");
    icon.addEventListener("click",activeMenu);
    если его нет и не будет - это просто можно удалить
     
  9. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    так он то есть, в том то и дело просто находится на другой странице
    http://testbcard.bootstrap.dtraduga.vh55.hosterby.com/discounts_for_points.php#
    на разрешении 1199 и меньше - это меню выбрать город и категорию
    и прикол в том что скрипт погасил все ссылки на этой странице, а переход нужен был только для одной
     
    Последнее редактирование: 26 май 2018
  10. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.558
    Симпатии:
    1.472
    ну так значит надо сделать проверку на существование. если у вас один и тот же js на всех страницах.

    Код:
    if (icon) {
        icon.addEventListener("click",activeMenu);
    }
     
    AlexGood нравится это.
  11. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
  12. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    А при чём тут var? var - это директива, которая заканчивается на первой точке с запятой.
    Но вопрос в другом: такая проверка может не сработать, нужно точно знать, что содержится в icon, если элемента на странице нет (например, там может быть андефайнед).

    А вообще, я уже говорил: используйте jQuery, он сам за такими мелочами следит.
     
    AlexGood нравится это.
  13. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    К сожалению я еще в стадии изучения и пока еще не в курсе как это делать.
    С проверкой я понял, только не понял куда ее правильно прописать.
    Весь JS в одном файле лежит.
    Может быть и стоило бы ту часть кода, которая отвечает за меню на 2 страницах просто прописать в сам файл, а не подключать к нему общий.
     
  14. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Код:
    $('#select_city_new').on('click', activeMenu);
    Плодить отдельные файлы есть смысл только в случае использования ES6 модулей, а их использовать ещё рано, ибо хоть на текущий момент, вроде, уже все браузеры их поддерживают, но, например, в той же Мозилле поддержку по умолчанию включили только в текущей версии (60), так что в использовании ещё много браузеров, где поддержки либо совсем нет, либо она отключена.
     
    AlexGood нравится это.
  15. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.558
    Симпатии:
    1.472
    ну, не правда. просто в его случае это имеет мало смысла. есть вполне себе тонны jquery говно-кода и я бы не стал грузить один огромный js.

    правда, его всегда можно закэшировать
     
    AlexGood нравится это.
  16. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Вот как был решен вопрос, чтобы работало и на главной странице где плавный переход к блоку и с другой страницы:

    Код:
    <script>
            $(document).ready(function(){
    
            $("#collapsibleNavbar").on("click","a#smooth_transition", function (event) {
            //отменяем стандартную обработку нажатия по ссылке
            event.preventDefault();
     
            //забираем идентификатор блока с атрибута href
            var id  = $(this).attr('href'),
     
            //узнаем высоту от начала страницы до блока на который ссылается якорь
            top = $(id).offset().top;
            
            //анимируем переход на расстояние - top за 1500 мс
            $('body,html').animate({scrollTop: top-100}, 1500);
        });
    });
    </script>
    его добавили не в общий файл с js а именно на главную страницу где нужен переход изначально.

    А это в общем файле js:

    Код:
    var smooth_transition = document.getElementById("smooth_transition"),
        uri = document.activeElement.baseURI;
          if (!uri.match("/index.php") ) {
            console.log('1');
            smooth_transition.href = "http://bestcard3.local/index.php#nav-home";
          }else{
              console.log('2');
          }
     
  17. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    У сайта не будет ЧПУ?
    В любом случае, это плохой вариант. Если js код должен определять текущую страницу, надо использовать data атрибуты. Например, повесить на боди:
    HTML:
    <body data-page='index'>
    И затем:
    Код:
    if($('body').data('page') != 'index')
     
    AlexGood нравится это.
  18. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Вернулся к этому вопросу. Все ошибки закрыл в консоли. Новый линк: testbcard.dtraduga.vh55.hosterby.com
    Проблема вылезла в процессе тестирования. С главной переходит на ура. С остальных страниц не всегда переходит. Вернее просто лагает (то переходит то не переходит - непонятно из-за чего). Ссылка добавляется при клике по клику "О программе" а перехода нет.
    Может есть у кого-нибудь предложения? Может как-то иначе реализовать?

    Последняя реализация:
    Код:
    var smooth_transition = document.getElementById("smooth_transition"),
        uri = document.activeElement.baseURI;
      if (!uri.match("/index.php") ) {
        smooth_transition.href = "index.php#nav-home";
      }
    Признаки работоспособности имеются, только непонятно надолго ли...
    Кто может плиз тест у себя с главной страницы и любой другой.
     
    Последнее редактирование: 5 июн 2018
  19. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    У меня на главной вообще не переходит и в консоли:
    Код:
    Error: Syntax error, unrecognized expression: /index.php#nav-home
    Вполне понятно из-за чего: из-за того, что в адресной строке браузера index.php может то быть, то не быть. И это влияет на срабатывания куска кода с ошибкой.

    Я уже выше написал, отталкиваться от содержимого адресной строки нельзя!

    И перестаньте использовать голый js! Вы его даже близко не знаете на таком уровне, чтоб использовать! Используйте jQuery.
     
    AlexGood нравится это.
  20. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Этот вариант я просто нашел в сети и просто под себя приспособил. А как это можно реализовать при помощи jQuery?