文档章节

js计算某个元素到顶部的距离

粒子数反转
 粒子数反转
发布于 2017/06/13 15:22
字数 263
阅读 158
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

直接上代码:

function findPosY (obj) {  //obj为所要计算的元素,可用id或class获取
  var top = 0
  if (obj.offsetParent) {
    do {
      top += obj.offsetTop
    } while (obj = obj.offsetParent)
    return [top]
  }
}

用处:

可用于点击后获取到相应元素,并让其滚动到顶部。如:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>滚动</title>
        <style type="text/css">
            .classCont div {
                height: 400px;
                width: 200px;
                border: 1px solid #000000;
            }
            .hrefCont{
                position: fixed;
                top: 50%;
                left: 230px;
            }
            .hrefCont div{
                display: block;
                width: 20px;
                height: 20px;
                margin-bottom: 2px;
                text-align: center;
                line-height: 20px;
                border: 1px groove #000000;
                cursor: pointer;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div class="classCont">
            <div id="class1">1</div>
            <div id="class2">2</div>
            <div id="class3">3</div>
            <div id="class4">4</div>
            <div id="class5">5</div>
        </div>
        <div class="hrefCont">
            <div data-id="#class1">1</div>
            <div data-id="#class2">2</div>
            <div data-id="#class3">3</div>
            <div data-id="#class4">4</div>
            <div data-id="#class5">5</div>
        </div>
    </body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            function findPosY (obj) {  //obj为所要计算的元素,可用id或class获取
              var top = 0
              if (obj.offsetParent) {
              do {
                top += obj.offsetTop
              } while (obj = obj.offsetParent)
                return [top]
              }
            }
            $(".hrefCont div").click(function(e) {
                var targetElem = $(e.currentTarget);
                var targetId = targetElem.data("id");
                var obj = $("#"+targetId)[0];
                var scrollHeight = findPosY(obj);
                window.scrollTo(0,scrollHeight);
            });
        });
    </script>
</html>

 

© 著作权归作者所有

粒子数反转
粉丝 1
博文 76
码字总数 24935
作品 0
闵行
前端工程师
私信 提问
有关Javascript的面试题

获取页面元素位置与宽高? element.clientWidth = content + padding element.clientHeight = content + padding element.getBoundingClientRect() 返回值情况 left:包围盒左边 border 以外的......

Jack088
2018/12/04
33
0
React实现底部footer针对页面进行自适应

前言 大概构思 上代码 1.获取底部footer相对于顶部的高度 js 2.用页面整体的高度和底部footer相对于顶部的高度进行判断, js css 3.还需要判断一下底部footer相邻的元素对于底部的距离 出现的...

我是前端攻城狮
08/13
0
0
精心收集的 95 个超实用的 JavaScript 代码片段( ES6+ 编写)

目录 Array 数组 Array concatenation (数组拼接) Array difference (数组比较) Array includes (数组包含) Array intersection (数组交集) Array remove (移除数组中的元素) Array sample ......

大灰狼的小绵羊哥哥
2018/11/13
0
0
js计算元素距离顶部的高度及元素是否在可视区判断

前言:   在业务当中,我们经常要计算元素的大小和元素在页面的位置信息。比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了)。有时还要进一步...

damon风
2018/01/30
0
0
进度条的2种实现方式1.js 2.纯css

Scroll Indicator称之为滚动指示器,是Web中常见的一种效果。用户滚动垂直滚动内容时,页面顶部有一个类似进度条的效果,当内容滚动到页面最低端,进度条效果填满整个进度条。感觉描述得有点...

筱飞
01/11
22
0

没有更多内容

加载失败,请刷新页面

加载更多

thinkphp6 视图变量输出

thinkphp6 视图变量输出 视图默认把变量输出为字符串类型,有些时候需要保证原来的类型,比如html字符串 raw参数,禁止转换 {$content.content|raw} 支持多个参数,比如解码php内置的htmlspe...

DrChenXX
7分钟前
2
0
【搞定Jvm面试】 Java 内存区域揭秘附常见面试题解析

本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb (【Java学习+面试指南】 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错的还,不妨去点个Star,鼓励一下!...

SnailClimb
17分钟前
2
0
jQuery如何根据数据属性值查找元素?

我有以下场景: var el = 'li'; 页面上有5个<li> ,每个都有一个data-slide=number属性(数字分别为1,2,3,4,5) 。 我现在需要找到当前活动的幻灯片编号,该编号映射到var current = $('ul...

javail
29分钟前
3
0
LaTeX自定义宏包、类文件的默认搜索路径设置方法

  对于自定义的LaTeX宏包与类,在调用时可以通过在命令\documentclass{}与\usepackage{}命令中指定完整路径或者相对路径,这样确实可以调用,但是编译时总是有烦人的警告信息,让人不爽。还...

陆巍_
31分钟前
3
0
计算机电子书 2018 BiliDrive 备份

下载方式 根据你的操作系统下载不同的 BiliDrive 二进制。 执行: bilidrive download <link> 链接 <!--more--> 文档 链接 Webpack 中文指南.epub (409.01 KB) bdrive://ce58b7b58292296a61......

ApacheCN_飞龙
51分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部