滚动到指定元素

最新推荐文章于 2024-04-17 11:59:13 发布

hoooly

最新推荐文章于 2024-04-17 11:59:13 发布

阅读量320

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hoooly/article/details/104801076

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
.content{
width: 100%;
}
.diabetes_title{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
background: #666666;
color: #ffffff;
}
.btn{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: red;
position: fixed;
color: #ffffff;
right: 100px;
bottom: 100px;
}
       .btn2{
       width: 100px;
       height: 50px;
       line-height: 50px;
       text-align: center;
       background-color: green;
       position: fixed;
       color: #ffffff;
       right: 0px;
       bottom: 100px;
       }
       #scrollUl li{
           height: 26px;
       }
</style>
</head>
<body>
<div class="conntent">
       <div class="diabetes_title">
       跳转内容
       </div>
<ul>
<li>你好</li><li>你好</li><li>你好</li>
<li>你好</li><li>你好</li>
<li>你好</li><li>你好</li>
<li>你好</li><li>你好</li>
<li>你好</li><li>你好</li>
</ul>

       <div class="diabetes_title">
       跳转内容2
       </div>
<ul>
<li>你好</li><li>你好</li><li>你好</li><li>你好</li>
<li>你好</li> <li>你好</li>
<li>你好</li><li>你好</li><li>你好</li>
<li>你好</li><li>你好</li>
<li>你好</li><li>你好</li><li>你好</li><li>你好</li>
<li>你好</li><li>你好</li><li>你好</li><li>你好</li>

</ul>
</div>
<div class="btn">按钮</div>
   <div class="btn2">按钮0</div>

   
   <div style="position: relative;">
       <div class="scrolldiv" style="height: 100px;overflow: auto;border: 1px solid #00A2D4;padding-top: 20px;">
           <ul id="scrollUl">
               <li>a</li><li>b</li><li>c</li><li>d</li>
               <li>e</li> <li>f</li>
               <li>g</li><li>h</li><li>i</li>
           </ul>
       </div>
       <div style="position: absolute;top: 0;">
           滚动到字母：<input type="text" id="letter" value="f" style="width: 30px;"><button class="btn3">GO</button>
       </div>
   </div>
<script>
(function(){
$('.btn').click(function(){
console.log("123")
$(document).ready(function () {
$("html,body").animate({
scrollTop: $(".diabetes_title").eq(0).offset().top
}, 500 /*scroll实现定位滚动*/ ); /*让整个页面可以滚动*/
});
});

           $('.btn2').click(function(){
           console.log("123")
           $(document).ready(function () {
                   $("html,body").animate({
                   scrollTop: $(".diabetes_title").eq(1).offset().top
                   }, 500 /*scroll实现定位滚动*/ ); /*让整个页面可以滚动*/
           });
           });
})();

       $(document).ready(function () {
           //滚动到g元素
           $('.btn3').click(function(){
               var lis= $("#scrollUl li");//取ul中li，类型是Dom
               var inputVal=$("#letter").val();
               var countliHgitht=0;//li高相加
               for(var i=0;i<lis.length;i++){
                   var strVal=$(lis[i]).text();//转成jquery对象，才能用text(),DOM要用的innerText
                   countliHgitht+=lis[i].clientHeight;//li的高相加
                   if(strVal==inputVal){
                       //如果当前的值==g,scrollTop=g之前相加的值
                       // alert(countliHgitht);
                           $(".scrolldiv").animate({
                          scrollTop: countliHgitht
                          }, 500 );
                       }
                   }
               })
           });

</script>
</body>
</html>