Jquery锚点导航定位

锚点导航,点击左侧导航定位到标题

如图所示:
Jquery锚点导航定位_第1张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style type="text/css">
    #menu {
        position: fixed;
        top: 150px;
        float: left;
        width: 150px;
        border-right: 1px dashed gray;
    }
    
    #menu ul {
        margin-left: -40px;
    }
    
    #menu ul li a {
        display: block;
        font-size: 7px;
        font-weight: bold;
        width: 150px;
        height: 60px;
        line-height: 30px;
        text-decoration: none;
        color: #333;
        text-align: center;
    }
    
    li {
        list-style: none;
    }
    
    #menu ul li a:hover,
    #menu ul li a.current {
        color: #fff;
        background: #3398db;
    }
style>
<script type="text/javascript">
    $(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>

<body>
    <div id="menu">
        <ul>
            <li><a href="#item1" class="current">第一章节 前言部分a>li>
            <li><a href="#item2">第二章节 单病种数据填报 /上报情况分析a>li>
            <li><a href="#item3">第三章节 各科室单病种数据质量分析a>li>
        ul>
    div>
    <div id="boxes" style="float: left; margin-left: 130px; width: 90%; line-height: 35px;">
        <h2 style="text-align: center;"><span style="font-size: 15pt"><span style="font-family: 微软雅黑"><strong><strong><span
            style="font-size: 15pt"><span style="font-family: 微软雅黑">span>span>
            strong>
            strong>
            span>
            span>
        h2>
        <h2 style="text-align: center"><span style="font-size: 15pt"><span style="font-family: 微软雅黑"><strong><strong><span
            style="font-size: 15pt"><span style="font-family: 微软雅黑"><strong
                class="tag2">XXXXstrong>单病种质控分析报告span> span>
            strong>
            strong>
            span>
            span>
        h2>
        <p id="item1" class="item">
            <span style="font-size: 15pt; margin-left: 40px;"><span style="font-family: 微软雅黑"><strong><strong><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><strong> <span
                    style="font-family: 微软雅黑">第一章节span> <span style="font-family: 微软雅黑">前言部分span>strong>
            span>
            span>
            strong>
            strong>
            span>
            span>
        p>
        <p style="margin-left: 40px; padding: 0 60px 10px 20px; text-align: justify">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">   
                        2020年7月30日,国家卫生健康委办公厅关于进一步加强单病种质量管理与控制工作的通知中指出,国家卫生健康委在全国开展了单病种质量管理与控制工作span>span>
            span> <span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">,建立了span><span style="font-family: 微软雅黑">单病种质量监测平台,持续监测单病种质控指标并发布质控结果span>span>
            span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">span>span>
            span><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">上海今创《单病种监测上报系统》span>span>
            span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">以保障医疗质量和医疗安全span>span>
            span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                                style="font-family: 微软雅黑">为出发点,span>span>
            span><span style="font-size: 13pt"><span
                                    style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">进一步提升医疗质量精细化、科学化管理水平span>span>
            span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                                    style="font-family: 微软雅黑">span>span>
            span>
            span>
            span>
        p>
        <h2 style="padding: 0 60px 10px 20px; text-align: left; margin-left: 40px;" id="item2" class="item"><span style="font-size: 15pt"><span
            style="font-family: 微软雅黑"><strong><strong><span style="font-size: 13pt"><span
                style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑"> 第二章节span> <span style="font-family: 微软雅黑">单病种数据填报span> <span style="font-family: 微软雅黑">/span><span style="font-family: 微软雅黑">上报情况分析span>strong>
            span>
            span>
            strong>
            strong>
            span>
            span>
        h2>
        <p style="text-align: center; margin-left: 40px;">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">  1.1
                                 整体情况:span>strong>
            span>
            span>
            strong>
            span>
            span>
        p>
        <p style="margin-left: 40px; text-align: justify">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑" class="tag1">span> span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">span> <span style="font-family: 微软雅黑"><span class="tag2">xxxxspan>医院共填报单病种类型共
            <span class="tag3">xxxxspan>个,分别为<span class="tag4">xxxx病种span>填报数量共计 <span class="tag5">xxxxspan>span>
            span>
            span>
            span>
            span>
        p>
        <p style="margin-left: 40px; text-align: justify">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">span><span style="font-family: 微软雅黑"><span class="tag6">span><span class="tag7">span>span>
            span>
            span>
            span>
            span>
        p>
        <p style="margin-left: 40px; text-align: justify">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">上报单病种数量共计span><span class="tag8">xxxxspan>span>
            span>
            span>
            span><span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">其中上报成功span><span style="font-family: 微软雅黑"><span
                        class="tag9">xxxxspan>例,上报成功率 <span class="tag10">xxxxspan>;上报失败<span class="tag11">xxxxspan>例,失败率<span class="tag12">xxxxspan> span>
            span>
            span>
            span>
            span>
        p>
        <table align="center" border="1" cellpadding="0" cellspacing="0" id="fpageform1" style="width: 870px; font-size: 16px;">
            <thead>
                <tr>
                    <th scope="col">序号th>
                    <th scope="col">病种类型th>
                    <th scope="col">需上报例数th>
                    <th scope="col">填报例数th>
                    <th scope="col">上报总数(上报成功+上报失败)th>
                    <th scope="col">上报率th>
                tr>
            thead>
            <tbody class="tag13">
                <tr>
                    <td>内容td>
                    <td>内容td>
                    <td>内容td>
                    <td>内容td>
                tr>
            tbody>
        table>
        <p> p>
        <p style="margin-left: 40px; text-align: justify">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">1.2
                                单病种数据质量情况:span>strong>
            span>
            span>
            strong>
            span>
            span>
        p>
        <p style="margin-left: 40px; text-align: justify">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">在医院等级评审、三级公立span>span>
            span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                            style="font-family: 微软雅黑">医院绩效考核中span>span>
            span><span style="font-size: 13pt"><span
                                style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">电子病历系统功能应用水平分级等大型span><span style="font-family: 微软雅黑">考试中,单病种质控都是必考项目。其中,单病种重点关注指标包括:span>span>
            span>
            span>
            span>
        p>
        <p style="margin-left: 40px; text-align: justify">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">某病种例数span>strong>
            span>
            span>
            strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑">=符合纳入条件的某病种出院人数累加求和;span>span>
            span>
            span>
        p>
        <p style="margin-left: 40px; text-align: justify">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">病历上报率span>strong>
            span>
            span>
            strong><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">=年度内符合单病种纳入条件的某病种上报至国家单病种质量监测平台的病例数/同期符合单病种纳入条件的该病种出院人数累加求和span>span>
            span><span style="font-size: 13pt"><span style="font-family: 微软雅黑">*100%span>span>
            span>
            span>
        p>
        <p style="margin-left: 20px; width: 96%; height: 20px;">p>
        <p style="margin-left: 20px; margin-top: 60px; width: 96%; height: 320px;" id="tag14">p>
        <h2 style="text-align: center"><span style="font-size: 12pt"><span style="font-family: Calibri"><span
            style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                style="font-family: 微软雅黑">图为单病种填报趋势图<span>(备注:统计一年的填报数据)span>span>
            span>
            span>
            span>
            span>
        h2>
        <p style="margin-left: 40px; text-align: center">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="color: #ff0000">span>span>
            span>
            span>
            span>
        p>
        <p id="tag15" style="text-align: justify; width: 96%; height: 320px;">p>
        <p style="text-align: center">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">图为单病种上报趋势图<span>(备注:统计一年的上报数据)span>span>
            span>
            span>
            span>
            span>
        p>
        <p style="text-align: center">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="color: #ff0000">span>span>
            span>
            span>
            span>
        p>
        <p style="text-align: left; margin-left: 60px;">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">平均住院日span>strong>
            span>
            span>
            strong><span style="font-family: 微软雅黑" class="tag16" title="某病种出院患者占用总床日数/同期同病种总出院人数">=某病种出院患者占用总床日数/同期同病种总出院人数span> span>
            span>
            span>
            span>
        p>
        <p style="text-align: left; margin-left: 60px;">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">次均费用span>strong>
            span>
            span>
            strong><span style="font-family: 微软雅黑" class="tag17" title="某病种总出院费用/同期同病种总出院人数">=某病种总出院费用/同期同病种总出院人数span> span>
            span>
        p>
        <p style="text-align: left; margin-left: 60px;">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">病死率span>strong>
            span>
            span>
            strong><span style="font-family: 微软雅黑" class="tag18" title="某病种死亡人数/同期同病种总出院人数*100%">=某病种死亡人数/同期同病种总出院人数*100%span>span>
            span>
        p>
        <h2 style="text-align: center"><span style="font-size: 12pt"><span style="font-family: Calibri"><span
            style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                style="font-family: 微软雅黑; font-weight: bold;">各病种平均住院日、次均费用、病死率汇总(上报数据)span>span>
            span>
            span>
            span>
        h2>
        <table align="center" border="1" cellpadding="0" cellspacing="0" id="fpageform2" style="width: 870px; font-size: 16px;">
            <thead>
                <tr>
                    <th scope="col">病种类型th>
                    <th scope="col">平均住院日th>
                    <th scope="col">次均费用th>
                    <th scope="col">病死率th>
                tr>
            thead>
            <tbody class="tag19">
                <tr>
                    <td>内容td>
                    <td>内容td>
                    <td>内容td>
                    <td>内容td>
                tr>
            tbody>
        table>
        <br />
        <h2 style="margin-left: 40px; padding: 0 60px 10px 20px; text-align: left" id="item3" class="item"><span style="font-size: 15pt"><span
            style="font-family: 微软雅黑"><strong><strong><span style="font-size: 13pt"><span
                style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">第三章节span> <span style="font-family: 微软雅黑">各科室单病种数据质量分析span>strong>
            span>
            span>
            strong>
            strong>
            span>
            span>
        h2>
        <p style="margin-left: 40px; text-align: justify">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="font-family: 微软雅黑"> 
                        填报单病种数量数量共计span><span style="font-family: 微软雅黑"><span class="tag20">xxxspan> 例,遍布<span class="tag21">xxxspan>个科室,其中按填报量排名前三科室分布为<span class="tag22">xxxspan>span>
            span>
            span>
            span>
            span>
        p>
        <p style="text-align: justify; width: 90%; height: 400px;" id="tag23">p>
        <p style="text-align: center">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">各科室填报例数统计图span>span>
            span>
            span>
            span>
        p>
        <p style="margin-left: 40px; margin-top: 60px; text-align: justify">
            <span style="font-size: 12pt"><span
                style="font-family: Calibri"><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">  上报单病种数量数量共计span><span style="font-family: 微软雅黑"><span
                        class="tag24">xxxspan> 例,遍布<span class="tag25">xxxspan>个科室,其中按上报量(上报成功+上报失败)排名前三科室分布为<span class="tag26">xxxspan>span>
            span>
            span>
            span>
            span>
        p>
        <p style="text-align: justify; width: 90%; height: 400px;" id="tag27">p>
        <p style="text-align: center">
            <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">各科室上报例数统计图span>span>
            span>
            span>
            span>
        p>
    div>
    div>
body>

html>

你可能感兴趣的:(前端,jquery,前端)