Question

我有一个应用程序，我必须在点击标签的基础上滚动问题，问题是它没有从offset().top中找到合适的高度。根据点击的标签，我必须向上和向下滚动。我有像这样的问题结构

＆＃13;

// I am doing something like this, this is the part of the function which is triggered when a particular label is clicked.


     <a class="set-label" position: relative;" id="hidelabelBRAND">     
     BRAND </a><br>
     
     <a class="set-label" style="margin-right:5px; float: right; 
     position: relative;" id="hidelabelSTYLING"> STYLING </a><br>
     
     <a class="set-label lastdisplay" style="margin-right:5px; float:        
     right; position: relative;" id="hidelabelStyle cat"> Style cat   
     </a><br>    

$(document).on("click", ".set-label", function(e) {
      var clickedLabel = $(this).text().trim();
      var dim = $(this).parent().parent().next().find('h4');
      var findTag = $(dim).filter(function() {
        if ($(this).text().toString() == clickedLabel.toString()) {
          $('div[class="parentquestion"]').animate({
            scrollTop: $(this).offset().top
          }, 'slow');
        }
      });
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentquestion" id="parentQues">
  <h4>BRAND</h4>
  <div class="labelsBRAND" style="position: relative;" id="question9">
    <h2> Why so serious</h2>
    <textarea name="commit[9]"></textarea>
  </div>
  <h4>STYLING</h4>
  <div class="labelsSTYLING" style="position: relative;" id="question35">
    <h2> testing this demo</h2>
    <textarea name="commit[10]"></textarea>
  </div>
  <h4>Style cat</h4>
  <div class="labelsStyle cat" style="position: relative;" id="question53">
    <h2> propaganda invasion</h2>
    <textarea name="commit[11]"></textarea>
  </div>
</div>

＆＃13;

这是我父母的css

    .parentquestion {
    overflow-y: scroll;
    float: left;
    width: 80%;
    height: 490px;
    margin-top: 70px; 
}

可能就是创造问题。

当我点击任何标签时，它会上下滚动而不是所需的标签。难道我做错了什么？ offset()正确计算引用其父级$('div[class="parentquestion"]')的高度。

Answer 1

这可能会对你有所帮助。我使用$（＆＃39; html，body＆＃39;）代替$（＆＃39; div [class =＆＃34; parentquestion＆＃34;]＆＃39;）并将所有set-label元素放入单个div。

＆＃13;

// I am doing something like this, this is the part of the function which is triggered when a particular label is clicked.

$(document).on("click", ".set-label", function(e) {
      
      var clickedLabel = $(this).text().trim();
      var dim = $(this).parent().next().find('h4');
      
      var findTag = $(dim).filter(function() {
        
        if ($(this).text().toString() == clickedLabel.toString()) {
                    
          $('html, body').animate({
            scrollTop: $(this).offset().top
          },'slow');
        }
      });
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="set-label">BRAND </a>

<a class="set-label">STYLING </a>
<a class="set-label">Style cat </a>

</div>
<div class="parentquestion" id="parentQues">
  <h4>BRAND</h4>
  <div class="labelsBRAND" style="position: relative;" id="question9">
    <h2> Why so serious</h2>
    <textarea name="commit[9]"></textarea>
  </div>
  <h4>STYLING</h4>
  <div class="labelsSTYLING" style="position: relative;" id="question35">
    <h2> testing this demo</h2>
    <textarea name="commit[10]"></textarea>
  </div>
  <h4>Style cat</h4>
  <div class="labelsStyle cat" style="position: relative;" id="question53">
    <h2> propaganda invasion</h2>
    <textarea name="commit[11]"></textarea>
  </div>
  <h4>head 4</h4>
  <div class="labelsStyle cat" style="position: relative;" id="question53">
    <h2> sub head 4</h2>
    <textarea name="commit[11]"></textarea>
  </div>
  <h4>head 5</h4>
  <div class="labelsStyle cat" style="position: relative;" id="question53">
    <h2> subhead 5</h2>
    <textarea name="commit[11]"></textarea>
  </div>
</div>

＆＃13;

Answer 2

您需要为h2标签定义Id。 ...

Answer 3

好吧，我终于自己解决了，

$(document).on("click", ".set-label", function(e) {
  var clickedLabel = $(this).text().trim();
  var dim = $(this).parent().parent().next().find('h4');
  var findTag = $(dim).filter(function() {
  if ($(this).text().toString() == clickedLabel.toString()) {
  var childOffset = $(this).position().top + $('.parentquestion').scrollTop() - $(this).height();
      $('div[class="parentquestion"]').animate({
        scrollTop: childOffset}, 'slow');
    }
  });
})

诀窍是计算其当前位置$(this).position().top并将其添加到其父级$('.parentquestion').scrollTop()，并且我获得了该标记的额外高度，因此我使用{{1}从中减去了它}

我必须使用$(this).height()，因为我只希望这个特殊的div可以滚动，而不是整个文档，因为我的页面上有很多div，希望这会对所有人有所帮助。

动画{ScrollTop}无法正常处理标题（<h4>）标记

3 个答案: