使li滚动到ul最上面
<!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最上面的更多相关文章
- li浮动引起ul高度坍陷的解决方法
我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...
- #nav li:hover ul 与#nav li a:hover ul 的区别
#nav li:hover ul 与#nav li a:hover ul 有什么区别? ──────────────────────────────────────────── #nav li:hov ...
- JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- 使用JS方法使页面滚动到指定元素+优化+API介绍（动画）
前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 目录 使用的API简介 初版 ...
- li浮动时ul高度为0，解决ul自适应高度的几种方法
网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...
- 怎么用js精确判断li已经在ul存在过了?
<ul class="memory_messagelist" id="memory_messagelist"> <li><span ...
- 浮动后的 <li> 如何在 <ul> 中居中显示？
百度了许久都没有满意的解决方案,现在终于搞定了. 其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; ...
- 安卓使ScrollView滚动到底部代码
在开发中,我们经常需要更新列表,并将列表拉倒最底部,比如发表微博,聊天界面等等, 这里有两种办法,第一种,使用scrollTo(): public static void scrollToBottom ...
- 如何让多个li居中于ul中间
设置ul的display:table,text-align:center. 注意:不可以设置ul的宽,不然无法实现.
随机推荐
- 【代码笔记】Web-JavaScript-JavaScript 运算符
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- writing objects : 值%停住
在git bush 中使用命令:git config --global http.postBuffer 524288000 因为git上传,限定一次push命令的buffer大小.
- iOS----------开发中常用的宏有那些
OC对象判断是否为空? 字符串是否为空 #define kStringIsEmpty(str) ([str isKindOfClass:[NSNull class]] || str == nil || ...
- 复杂的web---web中B/S网络架构
web中B/S网络架构 1:web中B/S网络架构 2:CDN工作机制和架构 3:负载均衡: B/S分别是浏览器/服务器,架构流程为: 当你访问网站的时候,浏览器发送各种请求给浏览器,服 ...
- （转载）解决NVIDIA显卡驱动“没有找到兼容的图形硬件”的问题
(转载)解决NVIDIA显卡驱动“没有找到兼容的图形硬件”的问题 原出处:http://www.cnblogs.com/longdouhzt/archive/2012/02/28/2370660.ht ...
- matlab练习程序（地图上画经纬度）
需要看下生成的数据在地球上的经纬度具体位置. 投影为墨卡托投影. clear all; close all; clc; load coast; a=load('out.txt'); %自己的经纬度 ...
- Linux CentOS7下安装Python3及其setuptools、pip
CentOS 7系统自带Python2.7,我们尽量别去卸载它!!否则会出问题,比如yum无法使用等问题. 假若,在安装Python3时没有自动安装setuptools和pip,那么,如何在CentO ...
- lua时间戳和日期转换及踩坑
介绍lua的日期函数常用方法及我的一个踩坑. 时间戳转日期 os.date("%Y%m%d%H",unixtime) --os.date("%Y%m%d%H", ...
- mac os 10.12 Sierra 连接 惠普 M1136 MFP 打印机，通过 samba 协议，安装驱动，连接打印机
参考链接: https://support.hp.com/hk-zh/product/hp-zbook-17-g3-mobile-workstation/8693765/document/c04530 ...
- 在已经安装的nginx上，增加ssl模块
1. /usr/local/nginx/sbin/nginx -V 查看nginx版本与编译安装了哪些模块nginx version: nginx/1.10.3built by gcc 4.4.7 2 ...