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. 软件工程_6th weeks

    一.上次博客时说的UI,拖拉到现在才展示,完成了“登录,普通匹配,做题界面,做题结果”四项 功能: 二.单元测试工具 1.python单元测试工具   最近因为论文原因一直在用Python,Pytho ...

  2. python之导入模块

    导入模块的方法: 导入整个模块:import module_name 导入特定函数:from module_name import function_name 给函数指定别名:from module_ ...

  3. BZOJ4182 Shopping（点分治+树形dp）

    点分治,每次考虑包含根的连通块,做树形多重背包即可,dfs序优化.注意题面给的di范围是假的,坑了我0.5h,心态炸了. #include<iostream> #include<cs ...

  4. BZOJ3129 SDOI2013方程（容斥原理+扩展lucas）

    没有限制的话算一个组合数就好了.对于不小于某个数的限制可以直接减掉,而不大于某个数的限制很容易想到容斥,枚举哪些超过限制即可. 一般情况下n.m.p都是1e9级别的组合数没办法算.不过可以发现模数已经 ...

  5. BZOJ2716 [Violet]天使玩偶（cdq分治+树状数组）

    非常裸的KD-tree.然而我没学啊. 考虑如何离线求一个点在平面中的曼哈顿最近点. 绝对值显得有点麻烦,于是把绝对值拆开分情况讨论一波.对于横坐标小于该点的,记录对于纵坐标的前缀x+y最大值和后缀x ...

  6. QAU 18校赛 J题 天平（01背包 判断能否装满）

    问题 J: 天平 时间限制: 1 Sec  内存限制: 128 MB提交: 36  解决: 9[提交][状态][讨论版][命题人:admin] 题目描述 天平的右端放着一件重量为w的物品.现在有n个重 ...

  7. bzoj1002/luogu2144 轮状病毒 (dp)

    给周围的点编号1到n 我们设f[i]为(1到i和中间点)连成一个联通块的情况数,那么有$f[i]=\sum{f[i-j]*j}$,就是从i-j+1到i里选一个连到中心,然后再把i-j+1到i连成链 但 ...

  8. hdu 2577 How to Type(dp)

    Problem Description Pirates have finished developing the typing software. He called Cathy to test hi ...

  9. CF815D Karen and Cards

    CF815D Karen and Cards 固定一维c,然后(a,b)看成坐标,矩形区域求交 1.Segment tree Beats! 2.改成不合法的区域就是求并,c反向枚举,区域只增不减且完全 ...

  10. 决策单调性优化dp

    决策单调性: 对于一些dp方程,经过一系列的猜想和证明,可以得出,所有取的最优解的转移点(即决策点)位置是单调递增的. 即:假设f[i]=min(f[j]+b[j]) (j<i) 并且,对于任意 ...