Как сделать элемент меню прокруткой до заголовка на той же странице?

Я ищу способ создания элемента меню (в данном случае «Контакт»), который прокручивается вниз до нижней части моей домашней страницы, где расположена контактная информация.

Я попытался создать элемент меню внешнего URL и поместить «#contact» в поле URl, а затем поместить <a name="contact"> </a> в исходном коде, но я не мог заставить его работать.

Есть ли способы достичь этого в Joomla?

7 голосов | спросил Bogowoe 11 22014vEurope/Moscow11bEurope/MoscowTue, 11 Nov 2014 22:53:29 +0300 2014, 22:53:29

2 ответа


7

При создании привязок вам нужно назначить имя как идентификатор элемента, например:

Ссылка

<a href="#contact">Contact</a>

Anchor:

<div id="contact">
  // Your form here
</div>

При нажатии на нее вы попадете на этот якорь. Если вы хотите анимировать переход с помощью гладкой прокрутки, вы можете использовать jQuery, например:

jQuery(document).ready(function($) {

    $('a[href=#contact]').on('click', function(e) {
        e.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top-0}, 500);
    });

});
ответил Lodder 11 22014vEurope/Moscow11bEurope/MoscowTue, 11 Nov 2014 22:56:00 +0300 2014, 22:56:00
3

Вы можете сделать это, используя jQuery (как предложил Lodder). Вот альтернативное решение (от этого ответа в StackOverflow). Разместите этот код в файле index.php:

<script>
var $root = jQuery('html, body');
jQuery('#contact').click(function() {
    var href = jQuery.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 2000, function () {
        window.location.hash = href;
    });
    return false;
});  
</script>

Кроме того, если вам нужно, чтобы элемент меню работал с любой части вашего сайта (в случае, если ваша контактная информация видна только на домашней странице), поместите это в свой URL-адрес пункта меню:

index.php/#contact
ответил johanpw 12 32014vEurope/Moscow11bEurope/MoscowWed, 12 Nov 2014 00:39:07 +0300 2014, 00:39:07

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132