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

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

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


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

Что делаю не так?!
  • Вопрос задан
  • 831 просмотр
Комментировать
Подписаться 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);
    });
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Интегрировать МИС Медцентра с ЕЦП в части получения Направлений
24 апр. 2024, в 08:24
100000 руб./за проект
Модель управления электродвигателем в Matlab, Simulink
24 апр. 2024, в 06:52
5000 руб./за проект
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Ещё заказы