js点击页面某处跳转至页面指定元素的位置,这是一种不一样的跳转方法,不是a标签的href属性加元素id
点击对应按钮跳转至对应楼层效果,看演示图:
示例demo:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js点击元素跳转至指定位置——前端哥</title> <style> html,body { margin: 0px 0px; padding: 0px 0px;} .main { width: 100%; height: auto; } .louceng { width: 100%; height: 100vh; line-height: 100vh; text-align: center; color: #FFFFFF; font-size: 38px; } .qianduange_1 { background-color: #0BB27A;} .qianduange_2 { background-color: #0B79B2;} .qianduange_3 { background-color: #1612EF;} .qianduange_4 { background-color: #1AEF12;} .qianduange_5 { background-color: #EB0B25;} .box { width: 40px; height: 200px; position: fixed; right: 15px; top: 15px;} .btn { width: 40px; line-height: 40px; text-align: center; font-size: 28px; background-color: #FFFFFF; cursor: pointer; } .avtive { background-color: #6C680F; color: #FFFFFF;} </style> <script src="https://www.qianduange.cn/templets/default/js/jquery.min.js"></script> </head> <body> <div class="main"> <div class="louceng qianduange_1" id="qianduange_1">第一层</div> <div class="louceng qianduange_2" id="qianduange_2">第二层</div> <div class="louceng qianduange_3" id="qianduange_3">第三层</div> <div class="louceng qianduange_4" id="qianduange_4">第四层</div> <div class="louceng qianduange_5" id="qianduange_5">第五层</div> </div> <div class="box"> <div class="btn" data="qianduange_1">1</div> <div class="btn" data="qianduange_2">2</div> <div class="btn" data="qianduange_3">3</div> <div class="btn" data="qianduange_4">4</div> <div class="btn" data="qianduange_5">5</div> </div> <script> $(function (){ $(".box").find(".btn").unbind("click").click(function (){ var id = $(this).attr("data"); $(".box").find(".btn").removeClass("avtive"); $(this).addClass("avtive"); window.location.hash = "#" id; }) }) </script> </body></html>