Задать вопрос
@Yurasic
html

Как создать HTML Якорь на текущую страницу?

Как правильно создать якорь на текущей странице
Вроде, как бы, всё понятно
<p><a name="top"></a></p>
  <p>...</p>
  <p><a href="#top">Наверх</a></p>


Проблема лишь в том, что при нажатии на ссылку происходит переход на "site.ru#top", а не "страница#top".
Т.е., если я хочу сделать якорь, то у меня улетает на главную страницу, а не работает внутри страницы.

Что делаю не так?!
  • Вопрос задан
  • 882 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 5
@alekseydemyanenko
сделаете id="anchor1" вместо name

а сам переход конечно же href="#anchor1"

и все будет отлично.
Ответ написан
3 комментария
3 комментария
@Karmov69
делаешь элемент с id="idName"
делаешь ссылку на нее
Ответ написан
1 комментарий
1 комментарий
zoozag
@zoozag
Opencart
Якорь с id не работает внутри страницы, если есть <base href="/">
Ответ написан
Комментировать
Комментировать
@Yurasic Автор вопроса
Я помню, что когда штамповал сайты на ucoz, там это работало.
Сейчас я осваиваю OpenCart. Скорее всего в нём код немного по другому устроен. Я пока ковыряюсь лишь в шаблонизаторах, а не в самом PHP коде. Как я понимаю, что HTML метод не работает в шаблонизаторе. Буду пробовать другие варианты.
Ответ написан
Комментировать
Комментировать
Fortoo
@Fortoo
Top-Web OpenCart
Можно для якоря использовать любые идентификаторы, начиная от data-url и заканчивая просто классами
<body>
  <div class="calculator__step step_1">
    <img src="" alt="">
  </div>
  <div class="calculator__step step_2">
    <img src="" alt="">
  </div>
  <div class="calculator__step step_3">
    <img src="" alt="">
  </div>
</body>

К примеру прокручивать между блоками, используя классы.....
$("body").on('click', '.calculator__step img', function(e){
        var sc = '.step-' + (Number($(this).parent().attr("class").match(/(step\-[0-9]+)/)[0].match(/[\d]+$/)[0]) + 1);
        var dn = $(sc).offset().top;
           // sc - в переменную заносим информацию о том, к какому блоку надо перейти
           // dn - определяем положение блока на странице
            $('html, body').animate({scrollTop: dn}, 1000);
    });
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend Developer
Wanted. • Санкт-Петербург
До 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Оптимизация ботов телеграм
06 нояб. 2024, в 00:20
1000 руб./за проект
Смарт-контракт на блокчейне TON
06 нояб. 2024, в 00:03
40000 руб./за проект
Ручное тестирование приложения в сторах (iOS и Android)
05 нояб. 2024, в 23:19
3000 руб./за проект
Ещё заказы