HTML点按钮网页定位到相应位置三步搞定

1、设置要点按钮,并添加onclick()

<ul id="ul_menu" >
<li onclick="Redirect('1')">
    <a href="#">头部</a>
</li>
<li onclick="Redirect('2')">
   <a href="#">产品</a>
</li>
<li onclick="Redirect('3')">
    <a href="#">方案</a>
</li>
<li onclick="Redirect('4')">
    <a href="#">新闻</a>
</li>
</ul>

2、写上各模块位置div的id

<div id="div_info">
           <div class="index_info_title">头部内容</div>
           ......
</div>           

3、写上js事件

<script>
function Redirect(type) {
  var id = ""; //定位ID
  if (type == "1") {
      id = "#div_info"; //头部
  }
  else if (type == "2") {
      id = "#div_product"; //产品
  }
  else if (type == "3") {
      id = "#div_solution"; //方案
  }
  else if (type == "4") {
      id = "#div_news"; //新闻
  }
  if (id != "") {
      $("body,html").animate({ scrollTop: $(id).offset().top - 100 }, 500); //scroll top offset 指的是滚动条相对于其顶部的偏移        
  }
}
</script>
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小凡吱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值