Question

如何滚动焦点具有相同类名或相同属性的特定div，当点击li有类名list1然后滚动需要关注div类list1

<ul>
<li class="list1">list1</li>
<li class="list2">list1</li>
<li class="list3">list1</li>
</ul>
<div class="list1"></div>
<div class="list2"></div>
<div class="list3"></div>

Answer 1

您好，您可以尝试这个解决方案。

<ul>
<li class="list1"><a href="#list1">list1</a></li>
<li class="list2"><a href="#list2">list2</a></li>
<li class="list3"><a href="#list3">list3</a></li>
</ul>
<div id="list1">list1</div>
<div id="list2">list2</div>
<div id="list3">list3</div>

Answer 2

检查此解决方案。它肯定会帮助你。

<script>
jQuery(document).ready(function(){      
jQuery('ul li').click(function(){
        var myClass = jQuery(this).attr("class");
        jQuery("html, body").animate({ scrollTop: jQuery('div.'+myClass).offset().top }, 1000);         
        return false;
    });
});
</script>
<ul>
  <li class="list1">list1</li>
  <li class="list2">list2</li>
  <li class="list3">list3</li>
</ul>
<div class="list1">list1</div>
<div class="list2">list2</div>
<div class="list3">list3</div>

Answer 3

试试这个，它对我有用！

＆＃13;

$(document).ready(function () {
                $(".menu li").click(function () {
                    var activeLink = $(this).attr('class');
                    var activeElementPosition = $('div.' + activeLink).position();
                    $('body').animate({
                        scrollTop: activeElementPosition.top
                    }, 300);
                });
            });

＆＃13;

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<ul class="menu">
                <li class="list1">list1</li>
                <li class="list2">list2</li>
                <li class="list3">list3</li>
            </ul>
            <div class="list1"></div>
            <div class="list2"></div>
            <div class="list3"></div>

＆＃13;

如何滚动焦点具有相同类名或相同属性的特定div

3 个答案: