文档章节

JS的scrollIntoView

豆花饭烧土豆
 豆花饭烧土豆
发布于 2016/05/16 04:44
字数 702
阅读 28
收藏 0

scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与 元素顶部平齐。-------目前各浏览器均支持,其实就这个解释来说,我觉得还是不够的,最好还是又图对吧,来看下图,更好理解

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<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"><br>   //作为一个事件的函数来被调用
        function onc () {
        var dd = document.getElementById("nn").scrollIntoView(true);     //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示
    }
    </script>
</html>

如图:

这个id为nn的div就会到浏览器窗口的顶部显示;

至于false,你可以自行去尝试一下,效果也是很明显的,

=========================================

通过这个函数做的一个小实例,锁定网页的导航条,然后点击导航,调到指定的div,这个功能在一般的网页设计中是很常见的,看代码:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>nav测试</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            *{margin:0; padding:0}
            body{width:960px; height:2000px; margin:0 auto; border: 1px dotted #432432;}
            ul,li{list-style-type: none;}
            a{text-decoration: none;}
             
            .nav{border:1px solid #000;
                 height:30px;
                 z-index:9999;
                position:fixed ;
                top:0px;
                _position:absolute;
                _top:expression(documentElement.scrollTop + "px");
            }
             
            .nav ul li{
                float:left;
                font-size: 16px;
                line-height: 30px;
                padding:0px 63px;
            }
            .nav ul li:hover{
                background: #23ded3;
            }
             
            #main{
                height:1000px;
                border:1px solid #f00;
                margin-top:30px;
            }
             
            #div1{
                height:400px;
                border: 1px solid #ccc;
            }
             
             #div2{
                height:400px;
                border: 1px solid #ccc;
            }
             
             #div3{
                height:400px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="headr">
            <div class="nav">
                <ul>
                    <li><a>首页</a></li>
                    <li><a onclick="onc()">你好</a></li>
                    <li><a>很好</a></li>
                    <li><a>他好</a></li>
                    <li><a>真的</a></li>
                    <li><a>哦哦</a></li>
                </ul>
            </div>
        </div>
        <div id ="main" style="width:960px; height: auto;">
            <div id="div1">
                <p>我是div1的内容</p>
            </div>
             
            <div id="div2">
                <p>我是div2的内容</p>
            </div>
             
            <div id="div3">
                <p>我是div3的内容</p>
            </div>
        </div>
        <div id ="footr"></div>
    </body>
    <script type="text/javascript">
        var dHeight = document.documentElement.clientHeight;
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");
        div1.style.height = dHeight - 30 + "px";        //通过一个js动态的来确定每个div的高度,还可以通过循环来实现,这里就不加了,各位自己可尝试
        div2.style.height = dHeight -30 + "px";
        div3.style.height = dHeight -30 + "px";
         
         
            var li = document.getElementsByTagName("li");
            li[0].onclick = function(){
                div1.scrollIntoView(false);          //这里不能给true不然会将会与导航条重叠
            }
             
            li[1].onclick = function(){
                div2.scrollIntoView(false);
            }
             
            li[2].onclick = function(){
                div3.scrollIntoView(false);
            }
    </script>
</html>

 

本文转载自:http://www.cnblogs.com/Daneil/p/4981764.html

豆花饭烧土豆

豆花饭烧土豆

粉丝 15
博文 357
码字总数 93591
作品 0
深圳
私信 提问
selenium2java写一个设置秒杀价的脚本

本人在使用selenium做测试的时候,有时候需要去后台管理界面去设置一些测试数据,所以写了一些脚本,有一个比较有代表性的,因为这里的设置按钮和课程详情并不在一个页面,而是在列表页面。所...

八音弦
09/06
28
0
Android,使用Appium,进行自动化测试

注意,如果app里面有WebView,那么无法通过这个appium, 定点测试Webview 加载的某一个element;这个问题,已经搞2天了, 但是并没有解决,如果大家有解决方案的话, 恳请赐教! 贴上学习链接...

alphet
02/25
0
0
高性能CSS3动画

高性能 CSS3 动画 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的...

陈文亮
2015/03/01
9
0
前端性能优化:细说浏览器渲染的重排与重绘

前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识,常作为前端工程师乐此不疲的技术讨论话题,也正因如此,它也是面试时容易被问及的面试题之一。 ...

小白师兄
2018/07/23
0
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12

没有更多内容

加载失败,请刷新页面

加载更多

Leetcode PHP题解--D118 350. Intersection of Two Arrays II

D118 350. Intersection of Two Arrays II 题目链接 350. Intersection of Two Arrays II 题目分析 返回给定两个数组的交集。 思路 从数量较多的那个数组开始去另一个数组寻找是否元素存在,...

skys215
10分钟前
1
0
从源码上分析Android View保存数据状态

在Android开发旅途中,经常会遇到系统控件无法满足我们的视觉,交互效果,这个时候我们常常需要自己自定义控件来满足我们的需求。在这个开发探索过程中,我们不可避免得遇到View要保存状态信...

shzwork
11分钟前
2
0
请问AD603AQ和AD603AR有什么区别?

  AD603AQ和AD603AR只是在封装上的区别,前者是双列直插式,后者是贴片式,AD603A系列的温度都是在—40摄氏度到+85摄氏度之间,AD603还有一个系列是AD603S,它的温度是在—55摄氏度到+125摄...

仙溪
13分钟前
1
0
Linux /etc/profile 配置文件修改

1. 执行命令: vi /etc/profile 去类似windows 配置环境变量, 2.修改完,立即生效命令: source /etc/profile

kuchawyz
13分钟前
2
0
对于小白来说素描怎么入门?怎么学习?

素描初学者怎样入门?初学者怎样才能画好素描绘画?画好素描绘画有哪些技巧?想必这些问题都是绘画初学者们比较伤脑筋的问题,那么初学者到底怎样才能画好素描绘画呢?今天收集整理了关于素描...

huihuajiaocheng
15分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部