Làm thế nào để tạo một mục menu cuộn để tiêu đề trên cùng một trang?

7

Tôi đang tìm cách để tạo một mục menu (trong trường hợp này là "Liên hệ") cuộn xuống cuối trang chủ của tôi nơi chứa thông tin liên hệ.

Tôi đã thử tạo một mục menu URL bên ngoài và đặt "#contact" vào trường URl, sau đó đặt <a name="contact"> </a>mã nguồn, nhưng tôi không thể làm cho nó hoạt động.

Có cách nào để đạt được điều này trong Joomla không?

joomla-3.x menu content

— Chim sẻ
nguồn

bạn cần sử dụng id của vị trí từ bố cục mà bạn muốn liên kết cuộn đến. Nó làm việc cho tôi!

7

Khi tạo neo, bạn cần gán tên dưới dạng ID của phần tử, như vậy:

Liên kết:

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

Mỏ neo:

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

Khi nhấp vào, nó sẽ đưa bạn đến mỏ neo này. Nếu bạn muốn tạo hiệu ứng chuyển đổi với một cuộn trơn tru, bạn có thể sử dụng jQuery, như vậy:

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

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

});

— Nhà nghỉ
nguồn

3

Bạn có thể làm điều này bằng cách sử dụng jQuery (như gợi ý của Lodder). Đây là một giải pháp thay thế (từ câu trả lời này tại StackOverflow). Đặt mã này vào index.phptệp của bạn :

<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>

Ngoài ra, nếu bạn cần mục menu hoạt động từ bất kỳ phần nào trên trang web của bạn (trong trường hợp thông tin liên hệ của bạn chỉ hiển thị trên trang chủ), hãy đặt mục này vào url Mục menu của bạn:

index.php/#contact

— johanpw
nguồn