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

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

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


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

Что делаю не так?!
  • Вопрос задан
  • 888 просмотров
Комментировать
Подписаться 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 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Телеграмм бот на Python
22 нояб. 2024, в 22:26
3500 руб./за проект
Ещё заказы