跨页面锚点跳转效果

来源：互联网发布：知乎账号怎么注销编辑：程序博客网时间：2024/05/29 18:37

页面一：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-1.11.1.js"></script>    <style>        .nav_box{ height: 40px;}        .nav{padding:10px 30px;}        .nav1{background: red;}        .nav2{background:#1a9ebf;}        .nav3{background:#5a4b82;}        .nav4{background:#e3b822;}        .nav5{background:#52d689;}        .nav6{background:#9ad717;}    </style></head><body><div class="nav_box">    <p>跳转到页面help2：</p>    <a class="nav nav1" href="help2.html#box1">模块1</a>    <a class="nav nav2" href="help2.html#box2">模块2</a>    <a class="nav nav3" href="help2.html#box3">模块3</a>    <a class="nav nav4" href="help2.html#box4">模块4</a>    <a class="nav nav5" href="help2.html#box5">模块5</a>    <a class="nav nav6" href="help2.html#box6">模块6</a></div><div class="nav_box">    <p>跳转到页面help3：</p>    <a class="nav nav1" href="help3.html?paramName=1">模块1</a>    <a class="nav nav2" href="help3.html?paramName=2">模块2</a>    <a class="nav nav3" href="help3.html?paramName=3">模块3</a>    <a class="nav nav4" href="help3.html?paramName=4">模块4</a>    <a class="nav nav5" href="help3.html?paramName=5">模块5</a>    <a class="nav nav6" href="help3.html?paramName=6">模块6</a></div><script></script></body></html>

页面二：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-1.11.1.js"></script>    <style>        .box{width: 100%;height:500px ; display: block;}        .box1{background: red;}        .box2{background:#1a9ebf;}        .box3{background:#5a4b82;}        .box4{background:#e3b822;}        .box5{background:#52d689;}        .box6{background:#9ad717;}    </style></head><body><a class="box box1" id="box1">模块1</a><a class="box box2" id="box2">模块2</a><a class="box box3" id="box3">模块3</a><a class="box box4" id="box4">模块4</a><a class="box box5" id="box5">模块5</a><a class="box box6" id="box6">模块6</a></body></html>

页面三：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-1.11.1.js"></script>    <style>        .nav_box{ height: 40px;}        .nav{padding:10px 30px;}        .nav1{background: red;}        .nav2{background:#1a9ebf;}        .nav3{background:#5a4b82;}        .nav4{background:#e3b822;}        .nav5{background:#52d689;}        .nav6{background:#9ad717;}        .box{width: 100%;height:500px ; display: block;}        .box1{background: red;}        .box2{background:#1a9ebf;}        .box3{background:#5a4b82;}        .box4{background:#e3b822;}        .box5{background:#52d689;}        .box6{background:#9ad717;}    </style></head><body><div class="nav_box">    <a class="nav nav1" href="#1">模块1</a>    <a class="nav nav2" href="#2">模块2</a>    <a class="nav nav3" href="#3">模块3</a>    <a class="nav nav4" href="#4">模块4</a>    <a class="nav nav5" href="#5">模块5</a>    <a class="nav nav6" href="#6">模块6</a></div><a class="box box1" id="1">模块1</a><a class="box box2" id="2">模块2</a><a class="box box3" id="3">模块3</a><a class="box box4" id="4">模块4</a><a class="box box5" id="5">模块5</a><a class="box box6" id="6">模块6</a><script>    //根据参数名获得该参数  pname等于想要的参数名    function getParam(pname) {        var params = location.search.substr(1); //  获取参数 平且去掉？        var ArrParam = params.split('&');        if (ArrParam.length == 1) {            //只有一个参数的情况            return params.split('=')[1];        }        else {            //多个参数参数的情况            for (var i = 0; i < ArrParam.length; i++) {                if (ArrParam[i].split('=')[0] == pname) {                    return ArrParam[i].split('=')[1];                }            }        }    }    $(function() {        var mao = $("#" + getParam("paramName")); //获得锚点        if (mao.length > 0) {//判断对象是否存在            var pos = mao.offset().top-50;          //页面跳转后距离顶部50px;            $("html,body").animate({ scrollTop: pos  + 'px'}, 500);        }    });</script></body></html>

页面一效果图：
这里写图片描述

ps：之前写过的趣分趣分帮助中心效果！！！

0 0