ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLのスクロールバーでスライドするカスタムメニューのコード実装

HTMLのスクロールバーでスライドするカスタムメニューのコード実装

不言
リリース: 2018-08-24 09:36:30
オリジナル
2983 人が閲覧しました

この記事の内容は、スクロールバーを使ってスライドするカスタムメニューのコード実装に関するものです。必要な方は参考にしていただければ幸いです。

1. div を指定します

    <style>
            #menu{
                position: relative;top: 0px;
            }
    </style>
<div id="menu"> </div>
ログイン後にコピー

2. イベントメニューをクリックして

<script>
		function showHide(num){
			if(num==1){
				$(&#39;html, body&#39;).animate({scrollTop: $(&#39;#biaoji1&#39;).offset().top},"slow")//"slow"
			}else if(num==2){
				$(&#39;html, body&#39;).animate({scrollTop: $(&#39;#biaoji2&#39;).offset().top},"slow")
			}else if(num==3){
				$(&#39;html, body&#39;).animate({scrollTop: $(&#39;#biaoji3&#39;).offset().top},"slow")
			}
		}
	</script>
ログイン後にコピー

3. マウスをロールします

ブラウザでの再描画とリフローの概念分析

以上がHTMLのスクロールバーでスライドするカスタムメニューのコード実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート