it-swarm-ja.tech

メニュー項目を同じページの見出しにスクロールさせる方法は?

連絡先情報が配置されているホームページの一番下までスクロールするメニュー項目(この場合は「連絡先」)を作成する方法を探しています。

外部URLメニュー項目を作成し、URlフィールドに「#contact」を入力してから、<a name="contact"> </a>はソースコード内にありますが、機能させることができませんでした。

Joomlaでこれを達成する方法はありますか?

7
Bogowoe

アンカーを作成するときは、次のように名前を要素のIDとして割り当てる必要があります。

リンク:

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

アンカー:

<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);
    });

});
7
Lodder

(Lodderが提案するように)jQueryを使用してこれを行うことができます。ここに代替ソリューションがあります(StackOverflowで this answer から)。このコードを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
3
johanpw