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

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

  1. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Нвчните с этого:
    https://wmasteru.org/threads/Не-срабатывает-плавный-переход-по-якорной-ссылке.27048/#post-194062


    Я, кстати, вообще не могу понять назначение того кода, где сейчас возникает ошибка! Вам нужна прсто плавная прокрутка к якорю, так зачем какие-то извращенные манипуляции с подстановкой якоря в какую-то одну непонятную ссылку?
    Просто ловите клики по якорным ссылкам и вызывает тот код прокрутки, который у вас уже есть.

    По сути, у вас сейчас есть полностью рабочий код на jQuery, где нужно только поправить объект для отлова событий и есть непонятная какашка на чистом js.


    Значительная часть того, что разбросано в интернете (а особенно в Рунете!) - это то ещё дерьмище. Как рецепт бутеброда, где сказано срезать с пола кусок линолеума и положить на хлеб. Только бредовость идеи с линолеумом очевидна для всех, а бред, который можно в коде встретить понятен в основном тем, кто способен обойтись без поиска готовых решений.
     
    AlexGood нравится это.
  2. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Я вас услышал, на примере линолеума все очень даже доступно:Biggrin: . Отрубил тот js. Прописал в body data атрибут
    HTML:
    <body data-page='index'>
    И теперь получается так:

    Код:
    var smooth_transition = document.getElementById("smooth_transition"); //id пункта меню
        if($('body').data('page') != 'index'){
        smooth_transition.href = "index.php#nav-home";
    }
    Я правильно вас понимаю?
    Пока вроде как работает, но я не уверен в правильности написания.
     
  3. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Да, всё правильно.
    Но услышали вы не всё! Зачем вообще этот блок кода? Почему нельзя брать адрес перехода прямо с соответствующих ссылок? Зачем эти извращения с подстановкой адреса в какую-то одну ссылку?


    Кстати, у вас на главной теперь ещё и вот эта ошибка:
    Код:
    TypeError: $(...).mask is not a function main.js:131:4
    Вы либо все внешние библиотеки подключите на всех страницах, либо перенесите весь код, который на них завязан прямо в тело страницы, где соответствующая библиотека используется.
     
    $iD и AlexGood нравится это.
  4. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Эти все ошибки только из-за этих масок на jQuery:
    Код:
    jQuery(function($){
       $("#phone").mask("+375 (99) 999 - 99 - 99");
       $("#phone2").mask("+375 (99) 999 - 99 - 99");
       $("#code_activation").mask("9999");
       $("#date").mask("99.99.9999", {placeholder: "дд.мм.гггг" });
    });
    Это все делается с использованием jquery.maskedinput.min

    Если все это закомментировать, то ошибки не будет. Закоментировал - можете посмотреть консоль.
    По сути раз такое дело - просто маски надо прописать при помощи каких-нибудь регулярок на чистом js

    Это имеете ввиду эту строчку.:
    Код:
    smooth_transition.href = "index.php#nav-home";
    Это же якорь на той странице, и я не понимаю как иначе его прописать чтобы нормально с других страниц переходило
     
    Последнее редактирование: 6 июн 2018
  5. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Думаете, мне это не известно?

    Смотрите здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel#Validation
    И ещё здесь: https://martinwolf.org/before-2018/blog/2015/04/html5-telephone-input-validation/

    Да.
    Только не объясняйте мне, что она делает (я это понимаю), объясните зачем это делать?
     
    AlexGood нравится это.
  6. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Я знаю что понимаете, просто пытаюсь хоть что-то умное написать а не только спрашивать :Smile:
    Это чтобы если я нахожусь на другой странице по клику на блок О ПРОГРАММЕ перешло именно к тому якорю на ней.
     
  7. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Это не снимает вопроса, почему нельзя просто иметь ссылку с таким якорем и страницей? Чтоб просто кликнув на неё был переход на нужную страницу к якорю. Соответственно, на самой странице в ссылке только хеш, на других - ещё и ссылка на саму страницу.
    Вы ведь в любом случае плавной прокрутки таким образом не получите: при переходе между страницами js сбрасывается.

    Если хотите плавную прокрутку при переходе на другую страницу - это надо делать совсем по другому: при загрузке страницы проверять наличие хеша в адресной строке, и если он есть и на текущей странице есть элемент с соответствующим якорем - вызывать прокрутку. Именно хеш проверять, а не ссылку и безо всяких манипуляций со ссылками на страницах.
     
    AlexGood нравится это.
  8. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Изначально так пробовал, но почему-то наблюдались глюки.
    А про это что написали - мне пока не по силам. Еще пока не тот уровень. Логику я понимаю, а как правильно описать нет.
     
  9. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Ну, тут вопрос может возникнуть разве что, как получить хеш из адресной строки.
    И тут поможет Гугл.
     
  10. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Вылез интересный баг по этой теме. Везде все хорошо работает. Только в edge когда ниже 767 и меню бургера открываешь, по нажатию на ссылку О ПРОГРАММЕ переход почему-то не происходит?
     
  11. benefiss

    benefiss

    Регистрация:
    13 янв 2020
    Сообщения:
    0
    Симпатии:
    0
    Всем привет. Такая же тема, хочу сделать плавный переход по якорю:
    https://gocsgo.net/cybersport/facts/majors-cs-go/
    Все меню сделано из якорей разделов страницы.

    Подскажите, что куда...