<!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. 关于Object数组强转成Integer数组的问题：Ljava.lang.Object; cannot be cast to [Ljava.lang.Integer;

    一.当把Object数组,强转的具体的Integer数组时,会报错. 代码如下: //数组强转报错演示 Object[] numbers = {1,2,3}; Integer[] ints = (In ...

  2. 【代码笔记】Web-JavaScript-JavaScript 类型转换

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. [vue三部曲]第一部：vue脚手架的搭建和目录资源介绍，超详细！

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

  4. 深入浅出LSTM神经网络

    转自:https://www.csdn.net/article/2015-06-05/2824880 LSTM递归神经网络RNN长短期记忆   摘要:根据深度学习三大牛的介绍,LSTM网络已被证明比传 ...

  5. 开发Spring过程中几个常见异常（二）：Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'a' define

    本异常是小编在运行自己另外一篇博文中的例子时遇到的.(附博文:http://www.cnblogs.com/dudududu/p/8482487.html) 完整异常信息: 警告: Exception ...

  6. 性能优化4--Bitmap内存优化

    1.Bitmap在Android虚拟机中的内存分配 在Android3.0之前,Bitmap的内存分配分为两部分,一部分是分配在Dalvik的VM堆中.而像素数据的内存是分配在Native堆中,而到了 ...

  7. ASP.NET Core 应用发布与部署指南

    一.前言 本篇主要包含哪些内容? 将项目发布到本地目录 将项目传输到服务器并配置启动&开机自动启动 将Nginx作为访问入口,配置反向代理 本篇环境信息 开发环境: 用途 工具&版本 ...

  8. IDEA实用插件Lombok

    Lombok Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具,通过使用对应的注解,可以在编译源码的时候生成对应的方法.通常,我们所定义的对象和be ...

  9. JavaScript or JQuery 获取服务器时间

    用js做时间校正,获取本机时间,是存在bug的. 使用js也可获取到服务器时间,原理是使用 ajax请求,返回的头部信息就含有服务器端的时间信息,获取到就可以了(有的IE下扔不会正常获取,还是更建议走 ...

  10. c/c++ 线性表之单向链表

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