a标签href可跳转到知道dom节点（通过id）

代码

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>锚点链接</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css"/>

</head>

<body>

    <div id="content"></div>

    <div id="menuBar">

    </div>

    <script type="text/javascript">

        $(document).ready(()=>{

            for(var i=0; i<1000; i++){

                var temp =  i%100===0? '<div class="content-item-1" id="'+i+'">第'+i+'个元素</div>' : '<div class="content-item-2" id="'+i+'">第'+i+'个元素</div>'

                $('#content').append(temp)

            }

            for(var i=0; i< 10; i++){

                var temp = '<div class="menu-item"><a href="#'+i*100+'" class="menu-a">'+i+'</a></div>'

                $('#menuBar').append(temp)

            }

        })

    </script>

</body>

</html>

<style type="text/css">

    #menuBar{

        position: fixed;

        right: 10px;

        top: calc(50% - 250px);

        height: 500px;

        width: 30px;

        border-radius: 30px;

        align-items: center;

        text-align: center;

        background-color: rgba(166, 166, 166, 0.5);

    }

    .content-item-1{

        text-align: center;

        line-height: 30px;

        padding: : 10px;

        color: white;

        background-color: red;

    }

    .content-item-2{

        text-align: center;

        line-height: 30px;

        padding: : 10px;

        background-color: gray;

    }

    .menu-item{

        text-align: center;

        height: 40px;

        line-height: 30px;

    }

    .menu-a{

        height: 100%;

        width: 100%;

        color: white;

    }

</style>

运行效果电脑

运行效果手机

div锚点链接跳转的更多相关文章

  1. 关于锚点页内链接跳转出现问题(不响应,没有反应)的解决方法(ZT)

    我们知道,利用锚点可以实现页面链接跳转,也可以实现同一页面内的跳转功能. 例如:<a href="somepage.htm>某页面链接</a>  可以跳转链接到som ...

  2. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  3. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  4. jquer导航锚点链接动画效果和返回顶部代码

    $(function(){ $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 var index = this.tit ...

  5. H5小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接）

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  6. JS阻止链接跳转代码

    刷新后focus在第一个标签 onload="$('#input_email').focus(); " $(document).ready(function(){ $(" ...

  7. 锚点链接和hash属性

    相信大家挺经常见过这样一个效果.有一个很长很长的页面,分成好几部分,目录中一点击,就能定位到页面某个位置. 例如:有这样一个目录,例如你点击一下“HTML”,就会直接跳转到“HTML”的页面位置 这就 ...

  8. HTML基础--position 绝对定位 相对定位 锚点链接

    position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...

  9. Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点 链接 列表 表单 &l ...

随机推荐

  1. 安裝CentOS7后修復win7引导

    想尝试双系统的心情想必大家都能理解,但是安装了双系统之后的收尾工作也是必不可少的,由于对Linux并不算很熟悉,所以在这方面花了不少时间,这里将CentOS7下修復windows7引导的解决方案记录下 ...

  2. 虚拟机使用不同CPU配置时内存性能的差异

    第一款机器的配置: CPU(s): 8On-line CPU(s) list: 0-7Thread(s) per core: 1Core(s) per socket: 4座: 2NUMA 节点: 1 ...

  3. 3.27PSP及体会

    首先,我还是第一次了解老师这种先喂鸡汤,再打鸡血的行为,大老板的出现让我有些措手不及,我 的 天 啊! 话说这周alpha版本实现,真的是好费脑筋,因为预定是4~6周的项目一周弄完,而且还是在拥有几个 ...

  4. 14.5 富文本编辑【JavaScript高级程序设计第三版】

    富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得).在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一.虽然也没有规范,但在IE 最早 ...

  5. 国产首款5G手机抢先亮相：如此给力的说！

    5G网络是接下来移动互联网发展的主旋律,各家都在努力跟进,目前最积极的当属手机厂商,而2019年我们就能看到多款5G手机降临了. 在11月27日的未来信息通信技术国际研讨会上,vivo展示了他们正在研 ...

  6. Ubuntu16.04 ERROR 1698 (28000): Access denied for user 'root'@'localhost' 解决流程

    mysql版本 5.7.22 安装完成后出现问题 ERROR 1698 (28000): Access denied for user 'root'@'localhost' 可能是因为初始密码为空:按 ...

  7. VS2013编译报错error C4996: 'sprintf': This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS.

    解决方法有两个: 1. 在预编译头文件stdafx.h里(在没有include任何头文件之前)定义下面的宏: #define _CRT_SECURE_NO_DEPRECATE 2. 将sprintf函 ...

  8. VMware下Centos7快速搭建vsftpd

    最简单快捷的实现ftp的功能,不考虑安全问题. 1.配置防火墙和selinux vi /etc/selinux/config # This file controls the state of SEL ...

  9. PythonProject(1)vim的Hustoj插件

    打算写一个vim的插件,或者emacs的插件.可以在编辑器里打比赛,看rank,交代码.总之相当于一个桌面版的hustoj 这是上学期就有的一个脑洞产物,昨天学了Python的爬虫,发现这个东西很有实 ...

  10. 利用Python攻破12306的最后一道防线

    各位同学大家好,我是强子,好久没跟大家带来最新的技术文章了,最近有好几个同学问我12306自动抢票能否实现,我就趁这两天有时间用Python做了个12306自动抢票的项目,在这里我来带着大家一起来看看 ...