解决JS中锚点跳转样式混乱的问题

一开始项目上碰到的问题是点击锚点跳转，原本顶部的导航栏就不见了，然后页面样式混乱，代码如下：
ASPX界面代码：
 

<div id="menu">
            <ul>
                <li>
                    <a href="#item" style="text-align: left; margin-left: -10px;">目录</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#item1" class="current">一、总体概述</a>
                </li>
                <li>
                    <a href="#item2">二、按月份统计</a>
                </li>
                <li>
                    <a href="#item3">三、医疗(安全)不良事件分级</a>
                </li>
                <li>
                    <a href="#item4">四、按事件类型统计</a>
                </li>
                <li>
                    <a href="#item5">五、按事件类型统计</a>
                </li>
                <li>
                    <a href="#item6">六、事件部门处理例数汇总表</a>
                </li>
                <li>
                    <a href="#item7">七、不良事件上报数据分析结语</a>
                </li>
            </ul>
        </div>

有些人可能不知道这个herf="#item"是干嘛的，这里说明下，这个锚点跳转是跳转到对应的区块，所以要把对应的区块ID设置为跟这个herf跳转相同的ID，区块ID那块代码就不再贴了，注意下

JS代码：

<script type="text/javascript">
        document.write("<script type='text/javascript' src='../JavaScript/js/MaeFXBG.js?random=" + Math.random() + "'></s" + "cript>");
        //document.write("<script type='text/javascript' src='../JavaScript/js/MaeFXBG.js'></s" + "cript>");
        $(document).ready(function () {
            $(window).scroll(function () {
                var menu = $("#menu");
                var items = $("#boxes").find(".item");/*这里也可以写成$("content .item")或者$(".item"),但相比之下效率就不那么高了，因为id是唯一的，通过id查找的效率因此就高一点*/
                var top = $(document).scrollTop();
                var currentId = "";
                items.each(function () {
                    var m = $(this);
                    var itemTop = m.offset().top;
                    if (top > itemTop - 200) {
                        /*当大部分内容出现时，导航条焦点就会跳到相应位置，增强了用户体验*/
                        currentId = "#" + m.attr("id");
                    }
                    else {
                        return false;
                    }
                });
                var currentLink = menu.find(".current");
                if (currentId && currentLink.attr("href") != currentId) {
                    currentLink.removeClass("current");
                    menu.find("[href='" + currentId + "']").addClass("current");
                }
            });
        });
    </script>

这样之后确实实现了跳转效果，但是又出现了一开始提到的问题，样式混乱，这时候一个同事想到了jquery中的animate方法，用这个方法重新写了一下，既解决了跳转问题，样式也没有乱掉

ASPX界面代码如下：

<div id="menu">
            <ul>
                <li>
                    <a  onclick="scrollTag('#item1')"  class="current">一、总体概述</a>
                </li>
                <li>
                    <a onclick="scrollTag('#item2')" >二、按月份统计</a>
                </li>
                <li>
                    <a onclick="scrollTag('#item3')" >三、医疗(安全)不良事件分级</a>
                </li>
                <li>
                    <a onclick="scrollTag('#item4')" >四、按事件类型统计</a>
                </li>
                <li>
                    <a onclick="scrollTag('#item5')" >五、各科室不良事件数据分析</a>
                </li>
                <li>
                    <a onclick="scrollTag('#item6')" >六、事件部门处理例数汇总</a>
                </li>
                <li>
                    <a  onclick="scrollTag('#item7')" >七、不良事件上报数据分析结语</a>
                </li>
            </ul>
        </div>

JS代码如下：

//实现锚点跳转功能
function scrollTag(tag) {
    $('html, body').animate({
        scrollTop: $(tag).offset().top // 滚动到元素顶部
    }, 500);
}

使用这种方法还可以调整滚动的速度，至此，问题解决