scrollIntoView实现简单的锚点定位（示例：选择城市列表）

最新推荐文章于 2024-05-11 13:34:12 发布

12程序猿

最新推荐文章于 2024-05-11 13:34:12 发布

阅读量1.4k

点赞数 3

分类专栏： Jsp js 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_26383975/article/details/107161015

版权

一、介绍

scrollIntoView()方法利用滚动原理，来将相应的元素滚动到可是区域内。

首先需要说明的是，这个方法并没有写入标准，但是大多数主流浏览器已经支持或部分支持其功能了，所以可以放心使用，当然如果有朝一日标准出来了，那就按标准来吧。

其次要说明的是，这是js原生方法，jquery等框架是使用不了的，所以，获得元素的方法一定是document.getElementById或querySelector，然后才可以点出来scrollIntoView()方法。

1.简介

scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域

2.语法

element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数

语法参数
在这里插入图片描述

3.示例

var element = document.getElementById("box"); 
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({
   block: "end"});
element.scrollIntoView({
   behavior: "instant", block: "end", inline: "nearest"});

注意：取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。

4.浏览器兼容性

在这里插入图片描述

2.实例应用

以“城市选择列表”为例，点击右侧 A,B,C,…首字母，对应的城市列表定位到顶部

2.1 html5代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="jQuery" />
<meta name="description" content="演示XHTML、CSS、jquery、PHP案例和示例" />
<title>移动端按首字母检索城市列表</title>
<style type="text/css">
  body {
   
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: #fff;
    font-size: 14px;
  }
  #shortcut {
   
      position: fixed;
      right: 0;
      font-family: Helvetica;
      top: 100px;
  }
  #shortcut .item {
   
      height: 12px;
      padding-top: 4px;
      padding-left: 24px;
      text-align: center;
      font-size: 12px;
      color: #fa8919;
  }
  ul{
   
    padding-inline-start: unset;
  }
  li {
   
      list-style: none;
  }
  .title{
   
    height: 28px;
    padding-left: 16px;
    line-height: 28px;
    background-color: #f5f5f5;
    font-family: Helvetica;
    font-size: 12px;
    color: #878787;
  }
  .cityItem {
   
      height: 44px;
      padding: 0 16px;
      line-height: 44px;
      font-size: 16px;
  }
  .cityItem .name {
   
      display: block;
      position: relative;
  }
  .cityItem .name:before,
  .cityItem .name:after {
   
      display: block;
      position: absolute;
      border-top: 1px solid #e5e5e5;
      left: 0;
      width: 100%;
      content: ' ';
  }
  .cityItem .name:before {
   
      display: none;
      top: 0;
  }
  .cityItem .name:after {
   
      display: block;
      bottom: 0;
  }
  .cityItem:active {
   
      background-color: #f0f0f0;
  }
  .cityItem:last-child .name:after {
   
      display: none;
  }
</style>
</head>

<body>
<div class="city">
  <div calss="cities-hook" id="cities">

  </div>
  <div calss="shortcut" id="shortcut">

  </div>
  
</div>   
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/city.js"></script>
<script>
var cities = document.getElementById('#cities');
var shortcut = document.getElementById('#shortcut');
function initCities() {
   
    console.log(cityData)
    var lists="";
    var en = '<ul>';
    cityData.forEach(function (group) {
   
      var name = group.name;
      lists += '<div class="title" id="title'+group.name.substr(0, 1)+'">'+name+'</div>'; 
      lists += '<ul style="margin-right: 6px;">';
        group.cities.forEach(function(g) {
   
          lists += '<li class="cityItem" data-name="'+ g.name +'" data-id="'+ g.cityid +'"><span class="border-1px name">'+ g.name +'</span></li>';
        });
      lists += '</ul>';

      var name = group.name.substr(0, 1);
      en += '<li data-anchor="'+name+'" class="item">'+name+'</li>';
    })
    en += '</ul>';
    $("#cities").html(lists);
    $("#shortcut").html(en);
}

initCities();

$('.item').on('click', function(){
   
    var val = $(this).attr('data-anchor');
    //对应的模块 置顶
    var curId="title"+val
    window.document.getElementById(curId).scrollIntoView();
   
});

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

2.2 城市json数据

city.js：

var cityData=[{
   name:"★热门城市",cities:[{
   name:"北京市",tags:"BEIJING,北京市",cityid:1},{
   name:"上海市",tags:"SHANGHAI,上海市",cityid:4},{
   name:"深圳市",tags:"SHENZHEN,深圳市",cityid:2},{
   name:"广州市",tags:"GUANGZHOU,广州市",cityid:3},{
   name:"武汉市",tags:"WUHAN,武汉市",cityid:6}]},{
   name:"A",cities:[{
   name:"鞍山市",tags:"ANSHAN,鞍山市",cityid:64},{
   name:"安庆市",tags:"ANQING,安庆市",cityid:149},{
   name:"安阳市",tags:"ANYANG,安阳市",cityid:174},{
   name:"阿拉善盟",tags:"ALASHANMENG,阿拉善盟",cityid:202},{
   name:"阿坝州",tags:"ABAZHOU,阿坝州",cityid:290},{
   name:"安顺市",tags:"ANSHUN,安顺市",cityid:294},{
   name:"阿里地区",tags:"ALIDIQU,阿里地区",cityid:316},{
   name:"安康市",tags:"ANKANG,安康市",cityid:320},{
   name:"阿克苏地区",tags:"AKESUDIQU,阿克苏地区",cityid:348},{
   name:"阿勒泰地区",tags:"ALETAIDIQU,阿勒泰地区",cityid:355},{
   name:"阿拉尔市",tags:"ALAER,阿拉尔市",cityid:356}]},{
   name:"B",cities:[{
   name:"北京市",tags:"BEIJING,北京市",cityid:1},{
   name:"保定市",tags:"BAODING,保定市",cityid:62},{
   name:"包头市",tags:"BAOTOU,包头市",cityid:63},{
   name:"本溪市",tags:"BENXI,本溪市",cityid:77},{
   name:"蚌埠市",tags:"BANGBU,蚌埠市",cityid:100},{
   name:"北海市",tags:"BEIHAI,北海市",cityid:161},{
   name:"滨州市",tags:"BINZHOU,滨州市",cityid:166},{
   name:"宝鸡市",tags:"BAOJI,宝鸡市",cityid:170},{
   name:"亳州市",tags:"BOZHOU,亳州市",cityid:189},{
   name:"巴彦淖尔市",tags:"BAYANNAOER,巴彦淖尔市",cityid:199},{
   name:"白山市",tags:"BAISHAN,白山市",cityid:208},{
   name:"白城市",tags:"BAICHENG,白城市",cityid:210},{
   name:"百色市",tags:"BAISE,百色市