Question

我有一个页面分为2个垂直div＆＃39; s，左边是菜单，它将内容加载到右侧div。我尝试将.scrollintoview()添加到菜单div，因此点击的链接会保持在顶部对齐。

另外我想滚动div div div。我在这个fiddle处找到了解决方案，我试图为每个链接执行此操作，但是当我将其应用于我的代码时，它根本不起作用。

这是我的代码的小提琴

＆＃13;

//script to scrollintoview
$(".fleft #01").click(function() {
  var target = document.getElementById(".fleft #02");
  target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;   
});

//script to load content on right div
$(document).ready(function () {
  $('.fleft #01').click(function () {
    $('.fright').load('div1.html .innerRight');
  });
  $('.fleft #02').click(function () {
    $('.fright').load('teste2.html');
    var data = $(this).html();
  });
  $('.fleft #03').click(function () {
    $('.fright').load('teste3.html');
  });
})

＆＃13;

#contentt, html, body {
  height: 100%;
  overflow:hidden;
  margin-top: 0px;
  -webkit-text-size-adjust: auto;
}

.content { display:none;}

.fleft {
  float: left;
  width: 50%;
  height: 100%;
  overflow: scroll;
}

.fright {
  float: right;
  width: 50%;
  height: 100%;
  overflow: scroll;
}

.fleft #menu {
  list-style-type:none;
  padding-top: 1.5em;
  margin-left: -1.5em;
}

.fleft #menu li {
  display:block;
  font-size: 30px;
  line-height: 42px;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 2px;
  word-spacing: 0px;
  cursor:pointer;
  padding-bottom: 1.8em;
}

.fleft a:link {
  color: #000;
  text-decoration:none;
}

.fleft a:visited {
  color: #000;
  text-decoration:none;
}

.fleft a:hover {
  color: #000;
  text-decoration:none;
}

.fleft a:active {
  color: #0F0;
}

p.info {
  margin-left: 1em;
}

p.info {
  font-size: 16px;
  line-height: 24px;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* line 537, ../scss/main.scss */
ul.info li {
  float: left;
  display: inline-block;
  margin-right: 0.5em;
  border-bottom: 1px solid #2e2e2e;
  line-height: 1;
}

ul.info {
  padding-bottom: 1em;
  margin-left: -1.5em;
  margin-top: -0.5em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentt">
  <div class="fleft">
    <p class="info">loremipsum</p>
    <ul class="info">
      <li>
        <a href="http://www.google.com">News</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
    </ul>
    <ul id="menu">
      <li id="01"><a href="#" data-page="page1">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão</a></li>
      <li id="02"><a href="#" data-page="page2">desde o ano de 1500, quando uma misturou</a></li>
      <li id="03"><a href="#" data-page="page3">O Lorem Ipsum é um texto</a></li>
      <li id="03"><a href="#" data-page="page3">O Lorem Ipsum é um texto</a></li>
      <li id="03"><a href="#" data-page="page3">O Lorem Ipsum é um texto</a></li>
      <li id="03"><a href="#" data-page="page3">O Lorem Ipsum é um texto</a></li>
      <li id="03"><a href="#" data-page="page3">O Lorem Ipsum é um texto</a></li>
      <li id="03"><a href="#" data-page="page3">O Lorem Ipsum é um texto</a></li>
      <li id="03"><a href="#" data-page="page3">O Lorem Ipsum é um texto</a></li>
    </ul>
  </div>
  <div class="fright"></div>
</div>

＆＃13;

http://jsfiddle.net/7sH5R/，

Answer 1

检查这个小提琴http://jsfiddle.net/LJ4S7/。

 $("li a[data-page]").bind("click", function(){
    var targetPosition = $(this).closest("li").position();
    var divHeight = $(".fleft").get(0).scrollTop;       
   $(".fleft").animate({
      scrollTop: parseInt(divHeight,10) + parseInt(targetPosition.top,10)
    }, 1000);
});

有＆＃39;＆＃39;你的小提琴手中的非法角色。

ScrollIntoView / Scrolltothetop

1 个答案: