主页 / 问题 / 734954
Accepted
pridan
Asked:2020-10-24 06:17:20 +0000 UTC2020-10-24 06:17:20 +0000 UTC

滚动到页面上没有锚链接的元素（不要使用 id 进行锚定）

  • 772

您好，您能否就以下问题的可能解决方案提出建议。该页面有一个带有菜单项的侧边栏，当您单击菜单项时，它会滚动到页面上的相应部分。问题是菜单的菜单项可以改变，在这里也可以添加代码和内容。我想让它滚动到页面上具有相同文本的标题。类似于“单击菜单项，获取其文本，然后滚动到页面内容中的相同文本”

这是页面的结构https://jsfiddle.net/8ue02gud/2/

<div class="container">
<ul class="menu">
  <li class="item">
    <a href="">test1</a>
  </li>
    <li class="item">
    <a href="">test2</a>
  </li>
    <li class="item">
    <a href="">test3</a>
  </li>
    <li class="item">
    <a href="">test4</a>
  </li>
    <li class="item">
    <a href="">test5</a>
  </li>
</ul>
<ul class="content" id="viewer">
  <li>
    <h2>test1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
  </li>
    <li>
    <h2>test2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
  </li>
    <li>
    <h2>test3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
  </li>
    <li>
    <h2>test4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
  </li>
</ul>
</div>

.container{
  display: flex;
}
.menu{
  width:15%;
  list-style-type:none;

}
.item a{
  color:8C8757;
}

.content{
  width:85%;
}

.content li::nth-child(odd){
  background-color:#8C8475;
}
h2{
  color:#8C6D8A;
}
javascript

1 个回答

  1. Best Answer

    实际上，您自己描述了需要做的事情：“单击菜单项，获取其文本，然后滚动到页面内容中的相同文本。”

    $(".item a").click(function(e) {
  e.preventDefault();
  var h2Offset;
  var linkText = $(this).html();
  $("h2").each(function() {
    var h2This = $(this);
    if ($(h2This).html() == linkText) {
      h2Offset = $(h2This).offset().top;
    }
  });

  $('html, body').animate({
    scrollTop: h2Offset
  }, 2000);
});
    .container{
  display: flex;
}
.menu{
  width:15%;
  list-style-type:none;
  
}
.item a{
  color:8C8757;
}

.content{
  width:85%;
}

.content li::nth-child(odd){
  background-color:#8C8475;
}
h2{
  color:#8C6D8A;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="menu">
  <li class="item">
    <a href="">test1</a>
  </li>
    <li class="item">
    <a href="">test2</a>
  </li>
    <li class="item">
    <a href="">test3</a>
  </li>
    <li class="item">
    <a href="">test4</a>
  </li>
    <li class="item">
    <a href="">test5</a>
  </li>
</ul>
<ul class="content" id="viewer">
  <li>
    <h2>test1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
  </li>
    <li>
    <h2>test2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
  </li>
    <li>
    <h2>test3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
  </li>
    <li>
    <h2>test4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
  </li>
</ul>
</div>

    • 1

相关问题