1

我有一个分为 2 个垂直的页面div，左侧是菜单，它在右侧 div 上加载内容。我正在尝试将 th 添加.scrollintoview()到菜单div中，因此单击的链接在顶部保持对齐。

我也想只滚动 div left div。我在这个小提琴中找到了解决方案，我试图为每个链接都这样做，但是当我将它应用到我的代码时它根本不起作用。

这是我的代码的小提琴

//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');
  });
})
#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;
}
<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>

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

4

1 回答 1

0

检查这个小提琴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);
});

你的提琴手中有''非法字符。

于 2014-08-05T00:45:13.103 回答