1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         body {
  13.             margin: 0 auto;
  14.             padding: 50px;
  15.             background: #E2E2E2;
  16.         }
  17.  
  18.         p {
  19.             font-size: 15px;
  20.             background: #797979;
  21.             padding: 10px;
  22.             border-radius: 5px;
  23.             line-height: 2;
  24.             text-align: center;
  25.         }
  26.  
  27.         .flex-container {
  28.             display: flex;
  29.             flex-flow: row wrap;
  30.             margin-top: 20px;
  31.         }
  32.  
  33.         .flex-item {
  34.             width: 100%;
  35.             height: 500px;
  36.             overflow: auto;
  37.         }
  38.  
  39.         .flex-item li {
  40.             list-style-type: none;
  41.             width: 100%;
  42.             height: 100px;
  43.             background: #ffd200;
  44.             margin: 5px 0;
  45.             color: white;
  46.             font-size: 30px;
  47.             line-height: 100px;
  48.             text-align: center;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div>
  54.         <p>hi, 滚动指定的li到ul的顶部</p>
  55.         <div class="flex-container">
  56.             <ul class="flex-item" id="ul">
  57.                 <li>1</li>
  58.                 <li>2</li>
  59.                 <li>3</li>
  60.                 <li>4</li>
  61.                 <li>5</li>
  62.                 <li>6</li>
  63.                 <li>7</li>
  64.                 <li>8</li>
  65.                 <li>9</li>
  66.                 <li>10</li>
  67.                 <li>11</li>
  68.                 <li>12</li>
  69.                 <li>13</li>
  70.                 <li>14</li>
  71.                 <li>15</li>
  72.             </ul>
  73.         </div>
  74.     </div>
  75.  
  76.     <script type="text/javascript">
  77.  
  78.         function scrollToByIndex(index) {
  79.             let parentDom = ul
  80.             let ch = parentDom.children
  81.             let currentLi = ch[index]
  82.             let top = ch[0].offsetTop
  83.             if (currentLi) {
  84.                 parentDom.scrollTop = currentLi.offsetTop - top
  85.             }
  86.         }
  87.  
  88.         scrollToByIndex(2)
  89.  
  90.         function getIndexFormArr(arr, num) {
  91.             return arr.findIndex(function(item) {
  92.                 return item === num
  93.             })
  94.         }
  95.     </script>
  96. </body>
  97. </html>

使li滚动到ul最上面的更多相关文章

  1. li浮动引起ul高度坍陷的解决方法

    我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...

  2. #nav li:hover ul 与#nav li a:hover ul 的区别

    #nav li:hover ul 与#nav li a:hover ul 有什么区别? ──────────────────────────────────────────── #nav li:hov ...

  3. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  4. 使用JS方法使页面滚动到指定元素+优化+API介绍（动画）

    前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 目录 使用的API简介 初版 ...

  5. li浮动时ul高度为0，解决ul自适应高度的几种方法

    网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...

  6. 怎么用js精确判断li已经在ul存在过了?

    <ul class="memory_messagelist" id="memory_messagelist"> <li><span ...

  7. 浮动后的 <li> 如何在 <ul> 中居中显示？

    百度了许久都没有满意的解决方案,现在终于搞定了. 其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; ...

  8. 安卓使ScrollView滚动到底部代码

    在开发中,我们经常需要更新列表,并将列表拉倒最底部,比如发表微博,聊天界面等等, 这里有两种办法,第一种,使用scrollTo(): public static void scrollToBottom ...

  9. 如何让多个li居中于ul中间

    设置ul的display:table,text-align:center. 注意:不可以设置ul的宽,不然无法实现.

随机推荐

  1. ScrollView嵌套ListView、GridView,进入页面显示的位置并不是在最顶部，而是在中间部分问题

    在Android项目的开发中,经常会遇到一些布局,可能需要在ScrollView中嵌套ListView或.GridView来实现, 是在使用的过程总又遇到了一个新的问题,就是如果在ScrollView ...

  2. web-worker 的使用

    JavaScript采用的是单线程模式,它每次也只能执行一个事件,所以它在加载大量的事件的时候会比较慢. 而web-worker的作用就是给JavaScript提供一个多线程的模式. 注意的是 web ...

  3. webpack项目轻松混用css module

    前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css mo ...

  4. 单纯linux系统下hadoop2.7.3 eclipse，记一次成功的运行wordcount的注意事项

    hadoop要正确安装好 hadoop eclipse plugin要对应相应的eclipse版本 define hadoop location mr master:9000 另一个9001  下面的 ...

  5. python第一百六十九天,第十九周作业

    FIRSTCRM 学员管理开发需求: 1.分讲师\学员\课程顾问角色, 2.学员可以属于多个班级,学员成绩按课程分别统计 3.每个班级至少包含一个或多个讲师 4.一个学员要有状态转化的过程 ,比如未报 ...

  6. Mysql --学习：大量数据快速导入导出

    声明:此文供学习使用,原文:https://blog.csdn.net/xiaobaismiley/article/details/41015783 [实验背景] 项目中需要对数据库中一张表进行重新设 ...

  7. Android长时间定时任务实现

    在服务的onStartCommand方法里面使用AlarmManager 定时唤醒发送广播,在广播里面启动服务 每次执行startService方法启动服务都会执行onStartCommand 1.服 ...

  8. gif软件(ShareX)

    介绍 官网:https://getsharex.com/ 开源,免费的一款软件,录制GIF功能简单,按下快捷键,选取指定的区域即可进行录制,录制完成后的文件默认存放在个人文件夹,整个过程几乎几打断你的 ...

  9. shell的case用法

    今天给大家简单介绍一下结构条件语句的用法,实际上就是规范的多分支if语句,如下: case语法: case "字符串变量" in 值1)指令1... ;; 值2)指令2... ;; ...

  10. Android中使用ViewGroup.removeViews()时出现NullPointException解决方案

    在ViewGroup的内部写一个动画效果,在效果结束之后会调用onAnimationEnd(Animation arg0),在此方法中如果直接使用removeViews()时,可能会出现NullPoi ...