web-dev-qa-db-ja.com

Jqueryを使ってdivまでスクロールする

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

これが私が今まで持っている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>

助けてくれてありがとう

jqueryscroll
191
tshauck

まず、あなたのコードはcontact divを含んでいません、それはcontacts divを持っています！

サイドバーでは、ページ下部のdivにcontactがあります。contactsがあります。コードサンプルの最後のsを削除しました。 （サイドバーのprojectslink IDもスペルを間違えました）。

次に、jQueryのリファレンスページにある クリック の例をいくつか見てください。 clickイベントハンドラをオブジェクトにバインドするには、click like、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);
});

実際の例

（ ここ から取った機能にスクロールします）

シモンズ：明らかに、アンカータグ<a href="#gohere">blah</a> ... <a name="gohere">blah title</a>を使う代わりに、この道をたどるべき説得力のある理由があるべきです

329
Peter Ajtai

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

例：

$(window).scrollTop(200);

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

それで、あなたは.offset()または.position()でこの望ましい値を得ることができます。

例：

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

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

JQuery以外の代替メソッドは.scrollIntoView()です。次のような任意のDOM elementでそのメソッドを呼び出すことができます。

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

trueは、要素がビューの一番上に配置されるのに対して、falseは要素が一番上に配置されることを示します。 jQueryメソッドのいいところは、.animate()のようにfx functionsでも使用できることです。なので、あなたはなめらかにスクロールするかもしれません。

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

105
jAndy

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

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});
21
Dung Vu

この小さな関数を追加して、それをそのまま使ってください。$('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);
    });
  }
});
12
Ryan

わかりました、これは小さい解決策です、しかしそれはうまく働きます。

次のようなコードだとします。

<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がメインの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'));
6
christian

まず、jQueryのposition（）メソッドで、スクロールしたい位置までのdiv要素の位置を取得します。
例： var pos = $（ "div"）。position（）;
それからその要素のy座標（高さ）を "。上" 方法。
例：pos.top;
それから "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>
3
Sayyed Salman

これらも必要ありません。単に<a>タグのhrefにdiv idを追加するだけです。

<li><a id = "aboutlink" href="#about">auck</a></li>

そのように。

0
Armin Akhlagh