/ JS

クリックした要素にスクロール

クリックした要素にスクロールする.

概要

$(".container").off().on("click",function(e){
  var thisid="#"+$(this).attr("id");
  $(".wrapper").animate({
    scrollTop : $(thisid).offset().top+$(".wrapper").scrollTop()-$(".wrapper").offset().top
    }, {
        queue : false   
  });
});

解説

wrapperクラス内にある,id=thisidをもつ子要素をクリックすると,そこまでscrollTopで移動する.
その座標は以下で定める.

  • $(thisid).offset().top
    (本ページの例では,ページ全体から見た)子要素のY座標.
  • $(".wrapper").scrollTop()
    親要素の現在のスクロール量.
  • (".wrapper").offset().top
    親要素のY座標.

実行例

青い要素をクリックすると,先に紹介した各値の情報がalert()される.

contaier1text

contaier2text

contaier3text

contaier4text

contaier5text

contaier6text

contaier7text

contaier8text

contaier9text

contaier10text

<body>
  <style>
  .wrapper{
    position:relative;
    width:100%;
    height:500px;
    overflow:scroll;
  }
  .container{
    position:relative;
    height:100px;
    border: solid medium #5b8bd0;
    background:#f0f7ff;
    border:
  }
  </style>

  <div class="wrapper">
    <div class="container" id="container1">contaier1text</div>
    <div class="container" id="container2">contaier2text</div>
    <div class="container" id="container3">contaier3text</div>
    <div class="container" id="container4">contaier4text</div>
    <div class="container" id="container5">contaier5text</div>
    <div class="container" id="container6">contaier6text</div>
    <div class="container" id="container7">contaier7text</div>
    <div class="container" id="container8">contaier8text</div>
    <div class="container" id="container9">contaier9text</div>
    <div class="container" id="container10">contaier10text</div>
  </div>

  <script type="text/javascript">
    $(".container").off().on("click",function(e){
      var thisid="#"+$(this).attr("id");
      $(thisid).css("background","red");
      function bg(){
          $(thisid).css("background","#f0f7ff");   
      }
      alert("You clicked "+thisid+"\n"+
          '$(thisid).offset().top > '+$(thisid).offset().top+"\n"+
          '$(".wrapper").scrollTop() > '+$(".wrapper").scrollTop()+"\n"+
          '$(".wrapper").offset().top > '+$(".wrapper").offset().top
          );
      $(".wrapper").animate({
        scrollTop : $(thisid).offset().top+$(".wrapper").scrollTop()-$(".wrapper").offset().top
        }, {
            queue : false   
      });
      setTimeout(bg,500);
    });
  </script>
</body>

teahat

teahat

I'm t3ahat.

Read More

Tags

Latest Posts