该方法用于建立一个锚点,点击锚点,会跳到相应的内容,且该内容头部与浏览器头部平齐

实例:


<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a onClick="onc()">dasdasd</a>
<div style="width:400px; height:400px; border: 1px solid #f00;"></div>
<div id="nn" style="border:1px solid #666">
<div style="height:900px;">sadasdasd</div>
</div>
</body>
<script type="text/javascript">
//作为一个事件的函数来被调用
function onc () {
var dd = document.getElementById("nn").scrollIntoView(true); //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示
}
</script>
</html>

 

scrollIntoView()方法的更多相关文章

  1. 如何定位到append的当前位置,不用拉滚动条scrollIntoView方法

    var bb_mes_con = $('bb_mes_con'); var mes_html = document.createElement('div'); mes_html.setAttribut ...

  2. 利用scrollintoview方法模拟聊天室收到新消息

    这段时间再写一个聊天的功能,基本的原理已经通了,剩下的就是细化功能和实现了.原理通了不代表就能解决了这个问题,今天就遇到了一个小问题,就是在接收到新的消息以后,最新的消息不能显示在消息区域,而是跑到了 ...

  3. javascript通过改变滚动条滚动来显示某些元素的scrollIntoView()方法

    scrollIntoView(b)可以在任何HTML上调用,通过滚动滚动条,调用的元素就可以出现在可视区域. 参数如果是true,或者不传参数,则表示调用元素的顶部与浏览器顶部平齐. 如果传入fals ...

  4. [聊天框]让DIV的滚动条自动滚动到最底部 - 4种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

  5. 让DIV的滚动条自动滚动到最底部 - 4种方法

    方法一:使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="te ...

  6. 关于input的一些问题解决方法分享

    前言 input是我们接受来自用户的数据常用标签,在前端开发中,相信每个人都会用到这个标签,所以在开发过程中也时候也会遇到一些问题,本文的内容是我在跟input相爱相杀过程中产生的,在此记录分享一下. ...

  7. Element.scrollIntoView()

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 语法 element.scrollIntoView(); element.scrollIntoView( ...

  8. WebBrowser常用属性方法介绍

    WebBrowser 常用属性方法 ■■方法 ==============================  ▲GoBack    相当于IE的"后退"按钮,使你在当前历史列表中后 ...

  9. 走进javascript——被忽视的DOM方法和属性

    isEqualNode() isEqualNode方法可以用来判断两个DOM节点是否相同,给我的第一感觉是没用,因为两个DOM的比较很容易让人想成是字符串的比较,心想直接用两个等号不就可以了吗,但马上 ...

随机推荐

  1. 『TensorFlow』生成式网络中的图片预处理

    简介 这里的生成式网络是广义的生成式,不仅仅指gan网络,还有风格迁移中的类自编码器网络,以及语义分割中的类自编码器网络,因为遇到次数比较多,所以简单的记录一下. 背景 1.像素和数字 图像处理目标一 ...

  2. bzoj2875

    题意:\(x_{i+1}=(x_{i}*a+c)%m\)求,x_n%g 题解:\(x_n=(a^n*x_0+(a^{n-1}+a^{n-2}+...+a+1)*c)%m\),由于a-1和m不一定互质, ...

  3. 第二阶段——个人工作总结DAY03

    1.昨天做了什么:昨天实现了一个活动跳转到另一个活动. 2.今天做了什么:今天打算将所有的都实现,并且只用一个监听事件封装. 3.遇到的困难:无.

  4. suse11安装mysql5.7

    下载地址http://mirrors.sohu.com/mysql/MySQL-5.7/ 1.    wget -c  http://mirrors.sohu.com/mysql/MySQL-5.7/ ...

  5. 基于Helm和Operator的K8S应用管理的分享

    一.为啥要用helm 对于一些微服务架构来说,会有不同的服务在上面运行,你可能要管理诸如deployment.service.有状态的Statefulset.权限的控制等等.你会发现,部署应用后还会有 ...

  6. kohana导入和导出

    一.导入 ini_set('memory_limit', '512M'); require_once(Kohana::find_file('vendor', 'PHPExcel/PHPExcel/IO ...

  7. 遇到后缀名为whl的库的安装方法

    直接把whl文件改成zip文件,解压到site-packages里面,其中site-packages文件夹位于例如我的位置是e:/python34/lib/sit-packages即可,然后就可以用i ...

  8. Node+Express的跨域访问控制问题:Access-Control-Allow-Origin

    问题一:项目A通过Ajax访问项目B的接口,获取json数据,项目B采用Node+Express技术栈.项目A可能遇到跨域访问控制问题. 问题二:vue-resource 能够跨域,一般使用jsonp ...

  9. 使用maven构建一个web项目

                          使用maven构建一个web项目     首先建立一个maven项目(关于环境配置上节有详细过程): 1)-->右键new,-->project ...

  10. centos7安装nginx 报./configure: error: C compiler cc is not found

    CentOS 7 下 安装 nginx 执行配置命令 ./configure 时提示以下错误: 解决: 执行以下命令: yum -y install gcc gcc-c++ autoconf auto ...