锚点跳转bug ：导致点每个菜单，都会记录一次history，导致点返回频繁显示

问题：使用a链接添加锚点的方法进行跳转：

<a href="#字母表">字母</a>
<h1 id="字母表"></h1>

在移动端，点击音素，发音知识都会跳到对应的位置，但是点击返回的时候，不会返回上上一页，而是返回到音素，字母，因为锚点跳转会改变地址栏，会将地址变成

https://www.baidu.com#字母表
https://www.baidu.com#音素
https://www.baidu.com#发音知识

会生成好几个页面历史记录，相当于重新打开一个页面。但是我想点击返回的时候，就退出这个页面，怎么办呢？
用其他方法替换锚点跳转

法一：jquery:锚点的平滑跳转
例如：

$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);

使用jquery封装的animate方法，让页面滑动到指定位置（即$("#box")距离页面顶部的距离）

法二：使用 javascript:
html:

//顶部菜单栏
<div class="eudicmdMenuList">
   <ul class="ulmenulist">
      <li class="de_activeMenu"><a class="menu-level-1" data-href="字母表" level="1">字母表</a><i class="menuline"></i></li>
      <li class=""><a class="menu-level-1" data-href="语音介绍" level="1">语音介绍</a><i class="menuline"></i></li>
      <li class=""><a class="menu-level-1" data-href="重音规则" level="1">重音规则</a><i class="menuline"></i>
      </li><li class=""><a class="menu-level-1" data-href="语调" level="1">语调</a><i class="menuline"></i></li>
   </ul>
</div>

//顶部菜单对应的内容模块，只取了每一个模块内容的标题
<h1 data-id="字母表" class="h1_new h1_new_first">一、字母表</h1>
<h1 data-id="语音介绍" class="h1_new">二、语音介绍</h1>
<h1 data-id="重音规则" class="h1_new">三、重音规则</h1>
<h1 data-id="语调" class="h1_new">四、语调</h1>

js：

           //~~~~~~~~~~~~~操作顶部菜单~~~~~~~~~~~~~~~~~~~~~~~~
           //获取对应的语种，为添加class用
           var getlang = document.getElementById('eudicMenuToplist').getAttribute('data-lang');
           //判断某个元素是否存在，免得下面的js报错
           if (document.getElementById('eudicMenuToplist')) {
              //获取菜单栏标签 ul
               var ulmenulist = document.getElementsByClassName('ulmenulist');
               //默认第一个li 设置高亮颜色 class
               ulmenulist[0].childNodes[0].classList.add(getlang + '_activeMenu');
               //获取ul下的所有li
               var ulmenuli = ulmenulist[0].getElementsByTagName('li');
               // 给父层元素 ul 绑定点击事件
               ulmenulist[0].addEventListener('click', function (e) {
                   // 兼容性处理
                   var event = e || window.event;
                   var target = event.target || event.srcElement;

                   //设置 h1样式
                   var allhS = document.getElementsByTagName('h1');
                   for (var h = 0; h < allhS.length; h++) {
                     //如果顶部菜单的 data-href 属性值和标题的 data-id 属性值相等，页面就滑动到对应标题处
                       if(target.getAttribute('data-href')===allhS[h].getAttribute('data-id')){
                         window.scrollTo(0,allhS[h].offsetTop-60);  //-60px是跟我页面的需要设置的
                       }
                   }

                  // 设置顶部菜单栏高亮切换
                   for (var l = 0; l < ulmenuli.length; l++) {
                       ulmenuli[l].classList.remove(getlang + "_activeMenu");
                   }
                   target.parentNode.classList.add(getlang + "_activeMenu");
               });
           }