文档章节

关于scrollIntoView()方法

帅的人连bug都讨厌
 帅的人连bug都讨厌
发布于 2017/06/29 13:40
字数 354
阅读 20
收藏 0

在写一个控制滚动条滚动的效果的时候,突然发现了scrollIntoView()这个方法,甚是好用,其实它的作用就是起着锚点链接的作用。

 

一、最简单的用法:在行内用onclick事件

1

2

<a href="void(0)"  style="margin-bottom:900px; display:block;" onclick="document.getElementById('showscroll').scrollIntoView();">按钮2</a>

<div id="showscroll" style="width:100px; height:100px; pink;">< /div>

还可以这样写:直接写在href里,<a href="point9.scrollIntoView(false)">point9是相应div的ID名< /a>

1

2

3

4

5

6

7

8

9

10

<li>

                                                                 <a href="point9.scrollIntoView(false)"  class="point">

    电池待机多久? 电池坏了的话能在外面配吗?

</a>

                                            </li>

                                            <li class="box_hide" id="point9">

                                                <p class="one">

                                                    正常使用可以维持3-5天左右。GPS持续上传可用15个小时。启动"休眠"模式7-9天。可以在外面配置电池。采用的是诺基亚BL-6f标准电池,与诺基亚N95,N78等电池通用。

                                                </p>

                                            </li>

 

二,写在JS里:当写在js或者jquery里的时候,我发现写在head里或者js文件里都不管用,这段js代码要放在相应div的后边才管用,还有就是写在jquery里的话,document.getElementById("point"+e).scrollIntoView(false)这句是不能改成jquery方法的。

1

2

3

4

5

6

7

8

9

10

11

<script type="text/javascript">

                                        $(".point").each(function(e){

                                            $(this).click(function(){

                                                document.getElementById("point"+e).scrollIntoView(false);

                                                $("#point"+e).toggle();

                                                $("#point"+e).siblings(".box_hide").hide();

                                                $(this).css("color","#EC7302");

                                                //alert(e);

                                            });

                                        })

                                    </script>

© 著作权归作者所有

上一篇: Axios全攻略
下一篇: ES6之块级作用域
帅的人连bug都讨厌
粉丝 3
博文 53
码字总数 40134
作品 0
杭州
程序员
私信 提问
selenium 页面滚动操作

//移动到元素element对象的“顶端”与当前窗口的“顶部”对齐 driver.executescript("arguments[0].scrollIntoView();", element); driver.executescript("arguments[0].scrollIntoView(tru......

小新爱测试
2017/06/30
0
0
html页面定位,指定位置(暂时整理点,以后有更好的再换)

因为页面有点长,所以页面点位试了一下,可以的。页面定位,两种情况:1、A页面跳到B页面,滚动到页面的任何地方;2、在一个页面内由于页面太长,需要定位。 情况1: 首先在A页面创建一个锚点...

Reborn-D
2016/01/06
358
0
window.scrollTo

当需要在页面内导航,比如回到顶部,一般来说一句就可以搞定。 然而近日碰到个奇怪的现象,刷新后,滚动到了顶部,然后浏览器有很大概率跳回到原位置。 试过以下方法(包括延迟和组合执行):...

一点灵犀
2016/11/24
27
0
Android,使用Appium,进行自动化测试

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

alphet
02/25
0
0
完美修复 iOS 原生键盘遮挡input框

最近在做一个仿微信的聊天界面,有一个固定在页面底部的input框,本来使用fixed定位在底部,在android手机上没有任何问题,但在iOS上当点击输入内容的时候会出现不同情况的原生键盘遮挡输入框...

liupl
2018/05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot+jpa 错误信息org.springframework.beans.factory.BeanCreationException

报错信息 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory' defined in class path resource [org/springframework/boot/a......

冥焱
25分钟前
1
0
威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

迷你芊宝宝
32分钟前
2
0
十大经典排序算法动画与解析

排序算法是《数据结构与算法》中最基本的算法之一。 排序算法可以分为内部排序和外部排序。 内部排序是数据记录在内存中进行排序。 而外部排序是因排序的数据很大,一次不能容纳全部的排序记...

夜黑人模糊灬
35分钟前
4
0
7. java枚举

1. 枚举是什么 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便 2. 为什么不用静态常量来替代枚举类呢? 3. 常用方式 3.1 方式1 枚举类: package cn.ali.tencent...

20190513
36分钟前
1
0
elasticsearch – 弹性搜索:“Term”,“Match Phrase”和“Query String”之间的差异

术语查询匹配单个术语,因为它是:不分析值。 所以,它不必根据你索引的情况而降低。 如果您在索引时间提供Bennett并且未分析该值,则以下查询将不返回任何内容: { "query": { "te...

xiaomin0322
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部