整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、页面内跳转的锚点设置
页面内的跳转需要两步：
方法一：
①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）
②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容
方法二：
①：同方法一的①
②：设置锚点的位置 <h3 id="miao">喵星人基地</h3>；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#
方法二不用单独添加一个a标签来专门设置锚点 ，只在需要的位置的标签中添加一个id即可。
小案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>萌宠集结号</title>
</head>
<body>
<ul>
<li><a href="#miao">去找喵星人</a></li>
<li><a href="#wang">去找汪星人</a></li>
<li><a href="#meng">其他萌物</a></li>
</ul>
<a name="miao"></a><!--设置锚点方法1-->
<h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<a name="wang"></a>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<a name="meng"></a>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
</body>
</html>
二、跨页面跳转
①：设置锚点链接，在href中的路径后面追加：#+锚点名，即可
如：<a href="萌宠集结号.html#miao">跳转到萌宠集结号页面</a>
②：要跳转到的页面中要设置锚点，方法见一种的步骤②，两个方法任选其一。
辑导语：在上下滚动页面时，除了出现吸顶，还会出现吸底、锚点等情况，那么这些都是在滚动页面时需要注意的控件。本文作者结合最近工作中的实际项目，对于滑动时的吸顶、锚点规则方式的总结心得，一起来学习下吧。
上下滚动页面时，除了出现吸顶，还会出现吸底、锚点等情况，这些都是在滚动页面时需要注意的控件。
结合最近工作中的实际项目，Cassie将滑动用到的场景进行了提炼，总结出这份控件设计规范，一起来学习吸底、锚点是如何在APP以及PC端应用的吧～
PC端及移动端的底部有一些操作栏，比如表单的填写操作或者支付按钮的放置，移动端底部还会有全局的导航栏，这些会占用一定的空间，可以根据使用场景灵活选择吸底方式。
需要注意吸底的是具有操作价值的内容，吸底元素包括操作按钮、 引导操作、移动端的导航栏…
PC端在表单内容较多、查看内容文章、需要引导用户操作比如支付等场景下，当用户需滑动查看更多内容，可将操作类按钮吸底，需要吸底的内容可以根据布局调整显示。
在左图PC端钉钉邮箱中，属于编辑表单类的，将发送操作按钮固定吸底，用户只需要修改部分字段，更利于快速完成编辑；在PC端简书中，属于内容展示类的，出于增强互动的目的，将评论、点赞等操作固定在底部增加其操作便捷性。
考试星PC端采用左中右布局，将提交考试放在右侧底部，可以不占用考试内容高度空间；百度学术PC端采用左右布局，右侧是一些介绍内容，所以操作按钮固定在和之有直接关系的左侧内容底部。
移动端底部常会有一些吸底的控件，比如底部导航栏、主操作按钮、需要引导或便捷用户操作的控件等。
一级页面导航固定在底部，当该页面有主按钮，比如结算等则将该栏放到导航栏上面，如果还有引导类或便捷操作类控件则再放到主操作栏上面。
移动端，特别是购物车场景存在多条吸底内容。
具有引导性的操作，为了配合主操作而出现，也是固定在底部，但位于底部操作上面，在特定场景下出现。
比如闲鱼提供了一些常用问题，可以跟卖家交流更便捷；考拉海购购物车的优惠引导也是固定在底部，类似的还有京东、淘宝等购物车。
当PC端展示内容分多段，且其中有需要引导用户操作的按钮，建议在滚动到该段时将该操作按钮吸底，滚动到另外一段内容后再取消吸底。
考拉海购PC端的购物车页面，如果购物车内容比较多，支付栏是吸底的，向上滚动到购物车商品内容结束后，支付栏不吸底，下面展示推荐商品。
京东官网的购物车也是这种方式，但移动端主流购物车的支付都是固定在底部的。
吸底内容可以根据具体情况显示或隐藏，这种非固定的方式常用于移动端阅读及查看话题评论时。
在微信读书的阅读状态时，为了给读者提供沉浸式体验，隐藏操作栏，上滑时再显示；在知乎热榜浏览主题内容时，主操作栏跟在内容下面，当页面滑动后主操作栏改变布局样式吸底展示。
锚点以回到顶部也属于页面滚动时需要的控件，配合滚动条用于跳转到页面指定位置。
PC端和移动端都可以在内容过多时使用回到顶部控件，PC端的锚点定位类似导航一样可以放到页面左侧或者右侧，但其实只是页面的内容定位。
移动端可以利用滚动条做时间轴类型的定位或者分页定位。
当PC端页面内容区域比较长时比如瀑布流的使用，用户需要频繁返回顶部查看相关内容时，可以滚动后出现回到顶部控件。
花瓣PC端页面滚动后，右下角有一些功能操作，滚动后出现回到顶部控件。
当页面内容区域比较长时；当用户需要频繁返回顶部查看相关内容时，可以使用回到顶端返回页面顶部。
如果当前页面是主页，可以滚动后主页按钮便成回到顶部按钮，这样可以避免遮挡内容，优化阅读体验。
京东购物车页面除了展示添加到购物车的商品外，底部还有推荐上面，滚动后出现回到顶部控件；每日优鲜APP页面滚动后，导航的主页按钮变成回到顶部按钮，优化体验，类似的还有淘宝、饿了么、考拉等主页有瀑布流的内容。
当PC端有多条组合内容时，可以左侧做一个锚点定位配合滚动条快速定位到页面需要查看的内容。
当PC端使用上下布局时，且内容区域居中固定时，锚点悬浮在左侧显示，当屏幕小于一定尺寸时，锚点缩小悬浮于页面左侧，鼠标移入时再显示。
在优设的网址导航中，由于导航分为多个类型，所以将具体类型名称放到左侧展示，能快速定位到需要的内容。
当PC端左侧有导航，锚点定位可以放到右侧，常用于阅读文章等场景。
在Ant design的组件页，由于左侧有二级导航，所以将页面的锚点定位放在右侧，类似的还有语雀文章阅读。
当有时间类型的内容比如浏览照片时，可以采取时间轴定位的方式快速滑动到需要查看的内容。
内容过多的情况下也可以采取分页的形式，滚动后将分页及回到顶部固定在底部右下角位置。
例如宝宝树APP采用时间轴的方式快速定位，默认状态定位控件缩小固定在右侧，滑动时控件变大显示具体时间，方便用户按时间快速查找照片，类似的还有百度网盘里的照片浏览。
豆瓣APP在电影的讨论模块，选择一个讨论查看详情滚动后底部显示回复的定位锚点，控件放在操作栏上面吸底展示。
作者： Cassie
原文链接：www.zcool.com.cn/article/ZMTM0ODkzMg==.html
本文由 @ Cassie 授权发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.csdn.net#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里总结一些跳转锚点的方法。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
</script>
注意：运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。
$("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。
另外，脚本可以进一步优化，自己来试试
这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。
缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。
document.getElementById("divId").scrollIntoView();
比如：
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll1_top").scrollIntoView(true);
}
这里就是点击id是#roll1的元素可以滚动到id是#roll1_top的地方，这里的#roll1和#roll1_top最好是一一对应的，
这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。代码如下：
<html>
<head>
<title>HTML5_ScrollInToView方法</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
/*
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，
以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()
作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，
调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素
会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部
不一定齐平，例如：
//让元素可见
document.forms[0].scrollIntoView();
当页面发生变化时，一般会用这个方法来吸引用户注意力。实际上，为某个元素设置焦点也
会导致浏览器滚动显示获得焦点的元素。
支持该方法的浏览器有 IE、Firefox、Safari和Opera。
*/
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(false);
}
document.querySelector("#roll2").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(true);
}
}
</script>
<style type="text/css">
#myDiv{
height:900px;
background-color:gray;
}
#roll_top{
height:900px;
background-color:green;
color:#FFF;
font-size:50px;
position:relative;
}
#bottom{
position:absolute;
display:block;
left;0;bottom:0;
}
</style>
</head>
<body>
<button id="roll1">scrollIntoView(false)</button>
<button id="roll2">scrollIntoView(true)</button>
<div id="myDiv"></div>
<div id="roll_top">
scrollIntoView(ture)元素上边框与视窗顶部齐平
<span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>
</div>
</body>
</html>
个人建议使用第四种方法。
*请认真填写需求信息，我们会在24小时内与您取得联系。
