BinaryDevelop
  1. ホーム
  2. jquery

[解決済み】jQueryでdivにスクロールする。

2022-04-09 03:56:46

質問

ということで、サイドに固定リンクバーを持つページがあります。 異なるdivにスクロールしたいのですが。 基本的には、ページはちょうど1つの長いウェブサイトであり、私は横にあるメニューボックスを使用して別のDivにスクロールしたいと思います。

以下は、私がこれまでに作成したjQueryです。 

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#contact');
    }
});

問題は、ロード時に自動的にcontact divに移動し、次に #contactlink をクリックすると、一番上に戻ってしまいます。

編集：HTML 

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">
    
    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>
    
    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />    
            
    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>                       
    
    <!-- page title-->
    <title><!-- Insert Title --></title>
    

</head>
<body>
    <div id="container">
    
        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>
        
        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
    </div>
</body>

解決方法は？

まず、あなたのコードには contact を指定した場合、それは contacts div!

サイドバーには contact を、ページ下部の div に記述しています。 contacts . 最後の s をコードサンプルとして使用します。(また、スペルミスで projectslink をサイドバーで表示します)。

次に、「Second」の例をいくつか見てみましょう。 クリック をjQueryのリファレンスページに掲載しました。のようにclickを使う必要があります。 object.click( function() { // Your code here } ); オブジェクトにクリックイベントハンドラをバインドするために.... 下の例のように。余談だが、オブジェクトを引数なしで使って、クリックをトリガーすることもできる。 object.click() .

第3位 scrollTo は プラグイン をjQueryで実行します。プラグインがインストールされているかは分かりませんが を使うことはできません。 scrollTo() プラグインがないと この場合、あなたが望む機能は2行のコードだけなので、プラグインを使用する理由はないと思います。

OK、では解決策に移ります。

以下のコードは、サイドバーのリンクをクリックすると、正しい div にスクロールします。スクロールできるようにするには、ウィンドウを十分に大きくする必要があります。 

// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
    // Remove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}

$("#sidebar > ul > li > a").click(function(e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

ライブ映像例

<ストライク ( スクロール機能は ここで )

PS: もちろん、アンカータグを使用する代わりに、このルートを使用する説得力のある理由が必要です。 <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します