[Помогите] Ссылка на якорь в тексте

Тема в разделе "OpenCart", создана пользователем kuklev, 4 июл 2018.

  1. kuklev

    kuklev

    Регистрация:
    31 дек 2012
    Сообщения:
    171
    Симпатии:
    6
    Уважаемые, даже стыдно сюда писать, но пол часа уже ббюсь, не могу сделать ссылку на якорь в тексте.
    Страница: https://benkoni.com/nashi-kontakty

    Ссылку оформил вот так:
    <div style="text-align: center;"><span style="font-size: 20px;">Или свяжитесь с одним из наших <a href="#yakor">представительств</a>

    Якорь:
    <h2 style="text-align: center; font-size: 48px;"> <p id="yakor">Представительства</p></h2>

    И ничерта не работает, кидает на главную.
     
  2. skiv14

    skiv14

    Регистрация:
    9 июн 2015
    Сообщения:
    437
    Симпатии:
    180
    А зачем эта конструкция с якорями ? И у Вас див не закрыт.
    Просто слово сделать кликабельным не хотите ? Или не подходит такой вариант ?

    <div><a href="http://*******">***текст***</a></div>
     
  3. kuklev

    kuklev

    Регистрация:
    31 дек 2012
    Сообщения:
    171
    Симпатии:
    6
    Мне нужно, чтобы при нажатии на кнопочку представительства, браузер перелистывал страницу в самый низ....
     
  4. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Это должно быть ссылкой. Якори нормально работают только на теге а.
     
  5. kuklev

    kuklev

    Регистрация:
    31 дек 2012
    Сообщения:
    171
    Симпатии:
    6
    Ссылка на ссылку?
     
  6. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Да!
     
  7. kuklev

    kuklev

    Регистрация:
    31 дек 2012
    Сообщения:
    171
    Симпатии:
    6
    Получается вот так:

    <div style="text-align: center;"><span style="font-size: 20px;">Или свяжитесь с одним из наших <a href="/#yakor">представительств</a> - ссылка
    </span></div>

    <h2 style="text-align: center; font-size: 48px;"> <p><a id="yakor">Представительства</a></p></h2> - якорь

    И все равно кидает на главную страницу....
     
  8. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Потому что вот это: "/#yakor" - ссылка на главную.

    Вот вам живой работающий пример: https://jsfiddle.net/aq9Laaew/75182/
     
  9. kuklev

    kuklev

    Регистрация:
    31 дек 2012
    Сообщения:
    171
    Симпатии:
    6

    Так, похоже надо выпить, с примером ознакомился, переделал вот так (одни в одни как в примере)

    У меня 2 разных HTML блока, в первый внес код:

    <div class="container">
    <div class="row">
    <div class="col">
    <div style="text-align: center;"><span style="font-size: 20px;">Или свяжитесь с одним из наших <a href="#yakor">представительств</a></span></div> </div></div></div>

    Во второй

    <br>
    <br>
    <br>
    <h2 style="text-align: center; font-size: 48px;"> <p><a id="yakor">Представительства</a></p></h2>


    И все равно не работает....
     
  10. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Я думаю, вам в любом случае лучше обратиться к js, ибо даже если б оно работало, оно перемещается прыжками.
    Вот пример кода: https://www.taniarascia.com/smooth-scroll-to-id-with-jquery/
     
  11. Zulus

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

    Регистрация:
    20 дек 2012
    Сообщения:
    746
    Симпатии:
    722
    Что-то вы совсем заморочились :Rolleyes:.
    Может я не так понял, но внесу свою лепту. Была похожая проблема в ок и кажется так и осталась.
    В общем решение:
    Ставишь свой якорь в то место, куда надо "прыгать" (<a id="yakor" name="yakor">Представительства</a>)
    Дальше надо сделать правильную ссылку на якорь. Если в редакторе или вручную прописать этот якорь как у тебя сейчас, то будет кидать на главную, что у тебя и происходит, так как opencart не добавляет "промежуточную" ссылку и тупит в отношении того, что если #, то надо оставаться на той же странице (и выглядит такая ссылка так https://benkoni.com/#yakor, потому и не работает).
    Напиши полную ссылку на якорь - https://benkoni.com/nashi-kontakty#yakor
    вот так:
    Или свяжитесь с одним из наших <a href="https://benkoni.com/nashi-kontakty#yakor">представительств</a>
    И будет счастье :Wink:.
    ------
    пы.сы. Если щелкнуть по последней ссылке, то кидает сразу в нужное место сайта, на страничке с контактами :Smile:
     
    Последнее редактирование: 18 июл 2018
    Baco нравится это.