jqueryを使用してdivにスクロールします

205

だから私は固定リンクバーが横にあるページを持っています。別のdivにスクロールしたいのですが。基本的に、ページは1つの長いウェブサイトにすぎません。横にあるメニューボックスを使用して、さまざまなdivにスクロールしたいと思います。

これが私が今まで持っているjqueryです

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#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>

助けてくれてありがとう

jquery  scroll 
— Tshauck
ソース
連絡先リンクがどこにあるべきかについてhtmlはどのように見えますか？
— ジェームズブラック
これは、stackoverflow.com
— James Black
3
単純な古いアンカーの代わりにjQueryを使用している理由はありますか？
— ブライアンペイリス
2
@ジェームズ-それは実際には複製ではありません。この質問は、ページを特定のdivにスクロールします。その質問は、（divが何を表示しているかに関係なく）定義された増分でページをスクロールします。
— Peter Ajtai
これは本当に良いです：css-tricks.com/snippets/jquery/smooth-scrolling。私のために働いた。
— 2015年

回答:

342

まず、コードにはcontactdiv が含まれていませんcontacts。divがあります。

サイドバーcontactでは、ページの下部にあるdivにありますcontacts。sコードサンプルのファイナルを削除しました。（projectslinkサイドバーのIDのスペルも間違っています）。

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

第三に、scrollToあるプラグインは jQueryのでは。プラグインがインストールされているかどうかはわかりません。scrollTo()プラグインなしでは使用できません。この場合、必要な機能はコードが2行しかないため、プラグインを使用する理由はわかりません。

さて、次は解決策です。

サイドバーのリンクをクリックすると、以下のコードが正しい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>

— ピーター・アジュタイ
ソース
それが役に立ったと知ってうれしいですが、私はあなたが「ピクルス」を意味すると思いますが、私はそれらから出るよりも食べる方が良いと思います。
— Peter Ajtai、2009
最初のクリックではスクロールしません。：/私はそれをもう一度クリックし、それは動作します。
— BurakKarakuş2014
IDを次のようにhrefに配置する方がより論理的だと思います：href = " ＃about
— Gino
最初は機能しません。しかし、2回目にクリックすると、完全に機能します。
— Satish Singh
115

.scrollTo()jQueryにはメソッドはありませんが、メソッドはあり.scrollTop()ます。.scrollTopパラメータ、つまりスクロールバーがスクロールする先のピクセル値が必要です。

例：

$(window).scrollTop(200);

ウィンドウをスクロールします（十分なコンテンツがある場合）。

したがって、.offset()またはでこの望ましい値を取得できます.position()。

例：

$(window).scrollTop($('#contact').offset().top);

これにより、#contact要素がスクロールして表示されます。

jQuery以外の代替メソッドは.scrollIntoView()です。あなたはそのDOM elementような方法でそのメソッドを呼び出すことができます：

$('#contact')[0].scrollIntoView(true);

true要素がfalseビューの下部に配置されるのに対して上部に配置されることを示します。jQueryメソッドの優れた点は、fx functionslike でも使用できること.animate()です。だから何かをスムーズにスクロールするかもしれません。

参考：.scrollTop（） 、.position（） 、.offset（）

— jAndy
ソース
まだ同様の問題が発生しているようです。ページは、連絡先のdivではなく、ページを下にスクロールして読み込まれ、リンクから連絡先のdivに移動することもできません。ありがとう。編集：CSSでトップを使用してdivを間隔を空けていると言います、これはそれが間違った場所に行く原因になりますか？ちょっとした考え。
— tshauck
22

あなたが試すことができます ： 

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});
— ITビデオブログ
ソース
13

この小さな関数を追加して、次のように使用します。 $('div').scrollTo(500);

jQuery.fn.extend(
{
  scrollTo : function(speed, easing)
  {
    return this.each(function()
    {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});
— ライアン
ソース
6

これは小さな解決策ですが、問題なく機能します。

次のコードを想定します。

<div id='the_div_holder' style='height: 400px; overflow-y: scroll'>
  <div class='post'>1st post</div>
  <div class='post'>2nd post</div>
  <div class='post'>3rd post</div>
</div>

新しい投稿が「the_div_holder」に追加されると、その内部コンテンツ（divの.post）がチャットのように最後のコンテンツにスクロールされます。したがって、新しい.postがメインのdivホルダーに追加されるたびに、次のことを行います。

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));
— キリスト教徒
ソース
3

まず、jQueryのposition（）メソッドで、uまでスクロールしたいdiv要素の位置を取得します。
例：var pos = $（ "div"）。position（）;
次に、「. top」メソッドを使用して、その要素のy座標（高さ）を取得します。
例：pos.top;
次に、「. left」メソッドを使用して、そのdiv要素のx座標を取得します。
これらのメソッドは、CSSポジショニングに由来しています。
x座標とy座標を取得したら、JavaScriptのscrollTo（）;を使用できます。方法。
このメソッドは、ドキュメントを特定の高さと幅までスクロールします。
これは、x座標とy座標として2つのパラメーターを取ります。構文：window.scrollTo（x、y）;
次に、DIV要素のxおよびy座標をscrollTo（）関数に渡すだけです。
下記の例をご覧ください↓↓

<!DOCTYPE HTML>
    <html>
    <head>
        <title>
            Scroll upto Div with jQuery.
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#button1").click(function () {
                    var x = $("#element").position(); //gets the position of the div element...
                    window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position....
                    //it takes 2 parameters : (x axis cordinate, y axis cordinate);
                });
            });
            </script>
    </head>
    <body>
        <button id="button1">
            Click here to scroll
        </button>

        <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;">
            The DIV element.
            </div>
        </body>
    </html>
— サイード・サルマン
ソース
そして、干し草はあなたが何をしたかについてのいくつかのテキスト説明を追加します。
— Clain Dsilva、2015
@ClainDsilvaが言ったように、テキストによる説明を追加してください。
— SreekanthGS 2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.