链接跳转:在本页面跳转
href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，- 而
void(0)表示一个空的方法，也就是不执行js函数。
为什么要使用href=”javascript:void(0);”？
javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作，<a href="javascript：void(0)" onClick="window.open()">点击链接后，页面不动，只打开链接<a href="#" οnclick="javascript:return false;">作用一样，但不同浏览器会有差异。
href=”javascript:void(0);”与href=”#"的区别：
<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部<a href="#">点击 点击后会回到网面顶部；"＃"其实是包含了位置信息，例如默认的锚点是＃top也就是网页的上端- 而
javascript:void(0)仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首； - 而
javascript:void(0)则不是如此所以调用脚本的时候最好用void(0)；
使用javascript的方法
1、<a href="#" οnclick="javascript:方法;return false;">文字
2、<a href="javascript:void(0)" οnclick="javascript:方法;return false;">文字
3、<a href="javascript:hanshu();"这样点击a标签就可以执行hanshu()函数了。
简单代码栗子
<!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>
<ul style="position: fixed;">
<li><a href="javascript:;" data-tab="eat">111</a></li>
<li><a href="javascript:;" data-tab="sleep">222</a></li>
<li><a href="javascript:;" data-tab="walk">333</a></li>
</ul>
<div >
<div data-tab="eat" style="background:cyan; height:500px;">
111
</div>
<div data-tab="sleep" style="background:lightgreen;height:1000px;">
222
</div>
<div data-tab="walk" style="background:LightSalmon;height:1000px;">
333
</div>
</div>
<script>
[].slice.call(document.querySelectorAll('a')).forEach(function(el){
el.addEventListener('click', function(){
var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )
target.scrollIntoView(true);
})
})
</script>
</body>
</html>
