<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} body {
margin: 0 auto;
padding: 50px;
background: #E2E2E2;
} p {
font-size: 15px;
background: #797979;
padding: 10px;
border-radius: 5px;
line-height: 2;
text-align: center;
} .flex-container {
display: flex;
flex-flow: row wrap;
margin-top: 20px;
} .flex-item {
width: 100%;
height: 500px;
overflow: auto;
} .flex-item li {
list-style-type: none;
width: 100%;
height: 100px;
background: #ffd200;
margin: 5px 0;
color: white;
font-size: 30px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>hi, 滚动指定的li到ul的顶部</p>
<div class="flex-container">
<ul class="flex-item" id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
</div> <script type="text/javascript"> function scrollToByIndex(index) {
let parentDom = ul
let ch = parentDom.children
let currentLi = ch[index]
let top = ch[0].offsetTop
if (currentLi) {
parentDom.scrollTop = currentLi.offsetTop - top
}
} scrollToByIndex(2) function getIndexFormArr(arr, num) {
return arr.findIndex(function(item) {
return item === num
})
}
</script>
</body>
</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. Play 2D games on Nexus 6P running Android N7.1.1 with Daydream View VR headset

    http://files.cnblogs.com/files/we-hjb/N6P_Android7_SBS_SF.rar

  2. matlab练习程序(波纹扭曲)

    其实就是用sin或cos对x,y坐标进行变换,处理的时候依然是反向变换. 类似的,用不同的函数能得到不同的扭曲效果,比如log,1/x,exp等等. 效果如下: 代码如下(还给出了如何生成gif图片的 ...

  3. tkinter进阶版——ttk

    很长的一段时间里,我都是用tkinter进行GUI设计的,还写过一篇<tkinter模块常用参数>. 但后来慢慢地觉得,这个tkinter真的是有点丑啊. 于是,找到了现在的ttk. tt ...

  4. Linux 中yum的配置

    1.进入yum的路径 cd /etc/yum.repos.d 2.将原始的repo文件移入一个新建的backup文件下做备份 mv CentOS* backup 3.在/etc/yum.repos.d ...

  5. Linux中对swap分区的配置

    swap分区的安装与正常分区的安装大致相同,我这里就只说一下不同 大家可先看我上一篇的安装:https://www.cnblogs.com/feiquan/p/9219447.html 1.查看swa ...

  6. ASP.NET Core 1.0、ASP.NET MVC Core 1.0和Entity Framework Core 1.0

    ASP.NET 5.0 将改名为 ASP.NET Core 1.0 ASP.NET MVC 6  将改名为 ASP.NET MVC Core 1.0 Entity Framework 7.0    将 ...

  7. c/c++ 线性表之双向链表

    c/c++ 线性表之双向链表 线性表之双向链表 不是存放在连续的内存空间,链表中的每个节点的next都指向下一个节点,每个节点的before都指向前一个节点,最后一个节点的下一个节点是NULL. 真实 ...

  8. 负载均衡(nginx、dubbo、zookeeper)

    nginx dubbo zookeeper

  9. [Hive_add_8] Hive 常用参数配置

    0. 说明 记录 Hive 常用参数的配置 1. 设置本地模式 让 Hive 自动使用 Hadoop 的本地模式运行作业,提升处理性能 适合小文件,一般用于测试 set hive.exec.mode. ...

  10. Python 中的Duck Typing

    在学习Python的时候发现了鸭 子类型这个术语,听起来好像很有意思一样,所以把它记下来. 鸭子类型(Duck Typing)的名字来源于"鸭子测试": "当看到一只鸟走 ...