整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦 ，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。
这里作为锚点的标签可以是任意元素。
<a href="#aa">跳转到 id 为 aa 标记的锚点</a>
<p>-------------分隔线-------------</p>
<div id="aa">a</div>
这里作为锚点的标签只能是 a 标签。
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
<p>-------------分隔线-------------</p>
<a name="bb">name 为 bb 的 a 标签的锚点</a>
<div id="abb">bbb</div>
注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。
window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。
话不多说，看下面代码
「html 部分」:
<a id="linkc">平滑滚动到 c</a>
<p>-------------分隔线-------------</p>
<div id="cc">c</div>
「js 部分」:
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
// 计算该 DOM 节点到 body 顶部距离
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滚动到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。
下面也直接上代码
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
<p>-------------分隔线-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
下面为了方便看效果，把上面的代码整理在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
<p>-------------分隔线-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
<p>-------------分隔线-------------</p>
<a name="bb">name 为 bb 的 a 标签的锚点</a>
<p>-------------分隔线-------------</p>
<div>bb</div>
<a id="linkc">平滑滚动到 c</a>
<p>-------------分隔线-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
<p>-------------分隔线-------------</p>
<div id="dd">dd</div>
<p>-------------分隔线-------------</p>
<div></div>
</body>
<script>
var cc = document.querySelector('#cc')
var linkc = document.querySelector('#linkc')
function to(toEl) {
//ele为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
console.log(height)
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
</script>
<script>
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
</script>
</html>
效果图：
次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。
position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。
我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应 距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。
我们来通过代码和结果来看一下：
没有定位的样式
加了relative
加了relative的结果
上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]
我们可以看出猫图片并没有移动，而是给兔子图片留着位置。
加了absolute
加了absolute的结果
这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置
加了fixed
代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。
前面文章中写过类似的文章《手把手教你HTML5实现根据LBS定位到商家两点之间距离多少》，建议有兴趣的小伙伴可以看看。
各种浏览器对HTML5 Geolocation 的支持
浏览器 版本 只支持HTTPS版本 IE 9+ - Edge 12+ - Firefox 3.5+ - Chrome 5+ 50+ Safari 5+ 39+ iOS Safari 3.2+ 10.2+ Android Browser 2.1+ 56+ Chrome for Android 57+ 57+ UC Browser for Android 11.4+ -
出于安全考虑，部分浏览器只允许通过HTTPS协议使用 Geolocation API。在HTTP协议下使用Geolocation API 浏览器会抛出异常，在开发阶段，127.0.0.1和localhost 等本地域在两种协议下均可使用。
Geolocation API 通过 navigator.geolocation 全局对象进行访问，第一次访问的时候会询问用户是否允许共享位置。
判断浏览器是否支持 Geolocation API
// 判断浏览器属否支持获取位置
if(navigator.geolocation){
console.log("可以获取");
}else{
console.log("不支持");
}
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
获取用户地理位置
<input type="button" value="点击获取位置" id="btn">
<script>
let btnBtn = document.getElementById('btn')
btnBtn.onclick = () => { // 点击事件
getAdd()
}
// 成功回调
let success = (position) => {
console.log(`获取位置成功：${position.coords}`);
console.log(position.coords); // 获取坐标信息
// coords的常用属性
console.log(position.coords.latitude); // 获取坐标纬度
console.log(position.coords.longitude); // 获取坐标经度
console.log(position.coords.accuracy); // 获取坐标精度，单位为米
console.log(position.timestamp); // 获取位置的时间戳
}
// 失败回调
let error = (positionErr) => {
console.log(`获取位置失败：${positionErr.code}+${positionErr.message}`);
}
let options = {
enableHightAccuracy: false, // 获取高精度的位置信息，可能会增加响应时间，默认是false
timeout: 30000, // 设置超时时间，单位毫秒，如果到达设定的时间没获取到信息则回触发失败回调，默认值为0，无限大
maximumAge: 0 // 设置用户位置信息缓存的最大时间
}
let getAdd = () => {
navigator.geolocation.getCurrentPosition(success, error, options)
}
// 判断浏览器属否支持获取位置
if(navigator.geolocation){
console.log("可以获取");
}else{
console.log("不支持");
}
</script>
</body>
</html>
当获取位置失败时，会调用失败回调(error函数)。返回的参数<positionErr.code 标识错误的原因><positionErr.message错误信息描述> positionErr.code 值
《手把手教你HTML5实现根据LBS定位到商家两点之间距离多少》
作者：蓝海00
链接：https://www.jianshu.com/p/d0b0b6120055
*请认真填写需求信息，我们会在24小时内与您取得联系。
