Html+JavaScript 点击按钮回到顶部-网页引用百度地图API-过度锚点定位（源码可更改）

本文链接：https://blog.youkuaiyun.com/qq_43003203/article/details/121523431

点击按钮回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
</head>
<style>

    /*鼠标滑动20px后显示定值按钮*/
    #btnTop {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: #89cff0;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
    }

    #btnTop:hover {
        background-color: #1E90FF;
    }

    .a {
        margin-top: 100px;
        background-color: wheat;
        width: 1000px;
        height: 200px;
    }

    .b {
        background-color: silver;
        width: 1000px;
        height: 600px;
    }

    .c {
        background-color: firebrick;
        width: 1000px;
        height: 600px;
    }

    div {
        margin: 5px auto;
    }

    img {
        margin: 40px 100px;
    }

    /*鼠标悬停放大延时秒*/
    div img {
        cursor: pointer;
        transition: all 0.7s;
    }

    /*鼠标悬停放大倍数*/
    div img:hover {
        transform: scale(1.5);
    }
</style>
<body>


<div class="a">
    <img src="../PublicImg/Number/2.jpg" height="150"/>
</div>
<div class="b">
    <img src="../PublicImg/Number/3.jpg" height="313"/>
</div>
<div class="c">
    <img src="../PublicImg/Number/4.jpg" height="313"/>
</div>
<button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
<script>


    //回到顶部滑动效果
    window.onscroll = function () {
        scrollFunction()
    };

    var timer = null;
    btnTop.onclick = function () {
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn() {
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (oTop > 0) {
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                timer = requestAnimationFrame(fn);
            } else {
                cancelAnimationFrame(timer);
            }
        });
    }

    // 当网页向下滑动 20px 出现"返回顶部" 按钮
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        console.log(121);
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("btnTop").style.display = "block";
        } else {
            document.getElementById("btnTop").style.display = "none";
        }
    }

    // 点击按钮，返回顶部
    function returnTop() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }


</script>
</body>
</html>

网页引用百度地图API

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <meta name="keywords" content="百度地图"/>
    <meta name="description" content="百度地图API自定义地图"/>
    <title>自定义地图</title>

    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(108.995797, 34.31559);//定义一个中心点坐标
        map.centerAndZoom(point, 14);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    initMap();//创建和初始化地图
</script>
</html>

过度锚点定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>过度锚点定位</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    $(function () {
        $('a[href*=#],area[href*=#]').click(function () {
            console.log(this.pathname)
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var $target = $(this.hash);
                $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                if ($target.length) {
                    var targetOffset = $target.offset().top;
                    $('html,body').animate({
                            scrollTop: targetOffset
                        },
                        1000);
                    return false;
                }
            }
        });
    })
</script>
<style type="text/css" media="screen">
    .mk {
        height: 500px;
        width: 980px;
        border: 1px solid #999;
        margin: auto;
    }

    .evt_nav_right {
        position: fixed;
        top: 100px;
        right: 10px;
        width: 100px;
    }

    .evt_nav_right a {
        display: inline-block;
        width: 100px;
    }
</style>
<body>
<div class="evt_nav_right" style="visibility: visible;">
    <a ytag="20054" href="#mk01" class="evt_link1" title="老乔经典">2</a>
    <a ytag="20055" href="#mk02" class="evt_link2" title="实时爆款">3</a>
    <a ytag="20056" href="#mk03" class="evt_link3" title="热销推荐">4</a>
    <a ytag="20057" href="#mk04" class="evt_link4" title="主流配件">5</a>
    <a ytag="20058" href="#mk05" class="evt_link5" title="更多活动">6</a>
    <a ytag="20059" href="javascript:void(0);" class="evt_link0" title="返回顶部"></a>
</div>
<div class="mk" id="mk01"><img src="../PublicImg/Number/2.jpg" /></div>
<div class="mk" id="mk02"><img src="../PublicImg/Number/3.jpg" /></div>
<div class="mk" id="mk03"><img src="../PublicImg/Number/4.jpg" /></div>
<div class="mk" id="mk04"><img src="../PublicImg/Number/5.jpg" /></div>
<div class="mk" id="mk05"><img src="../PublicImg/Number/6.jpg" /></div>
</body>
</html>