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. React componentWillUpdate

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. XQN number format

    Q Numbers FormatAn XQN format number is an 1+X+N bit twos complement binary number; a sign bitfollow ...

  3. git 在局域网新建远程库及本地开发常用命令

    git  版本直接在官网下载即可:https://git-scm.com/downloads 安装后有git bash与git gui可以用. 1.在远程服务器上新建裸仓库 git init --ba ...

  4. BZOJ4998星球联盟——LCT+并查集(LCT动态维护边双连通分量)

    题目描述 在遥远的S星系中一共有N个星球,编号为1…N.其中的一些星球决定组成联盟,以方便相互间的交流.但是,组成 联盟的首要条件就是交通条件.初始时,在这N个星球间有M条太空隧道.每条太空隧道连接两 ...

  5. 日志收集-Elk6

    一:前言 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是开源软件.新增了一个FileBeat,它是一个轻量级的日志收集处理工具(A ...

  6. bzoj 4552 [Tjoi2016&Heoi2016]排序 (二分答案 线段树)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=4552 题意: 给你一个1-n的全排列,m次操作,操作由两种:1.将[l,r]升序排序,2 ...

  7. Educational Codeforces Round 3 C. Load Balancing

    C. Load Balancing time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  8. Linux 配置Samba服务

    查看系统下是否已经安装了sambarpm -qa |grep samba 安装sambayum -y install samba 配置samba创建目录sambamkdir -p /home/samb ...

  9. LOJ #6202. 叶氏筛法(min_25 筛)

    题意 求 \([L, R]\) 之间的素数之和 . \(L≤10^{10},2×10^{10} \le R \le 10^{11}\) 题解 一个有点裸的 min_25筛 ? 现在我只会筛素数的前缀和 ...

  10. BAI度 内部资料!Python_Threads多线程

    基本介绍 runable运行sleeping等待dead销毁(run方法执行完成或执行时抛出异常) 类继承threading.Thread线程的状态 函数介绍 在__init__里调用threadin ...