html怎么点击跳转到页面指定位置

发布时间:2022-03-28 14:18:55 作者:小新
来源:亿速云 阅读:2583

这篇文章主要为大家展示了“html怎么点击跳转到页面指定位置”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html怎么点击跳转到页面指定位置”这篇文章吧。

  最简单的一种:

  设置a标签的锚点就行啦,但是有个确定链接会更改,不利于刷新

  <div class="skip" id="skip">

  <h3>目录</h3>

  <ul>

  <li>

  <a href="#toc0" class="aaa">点击文字跳转</a>

  <!--herf的值一定要带#号,并且要和相对应要跳转的值一致-->

  </li>

  </ul>

  <div class="chapter" style="margin-top: 850px;">

  <a name="toc0" class="aaa1">文字跳转到这里</a>

  <!--这里的a标签可以用name也可以用id-->

  <p>心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假

  心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假</p>

  </div>

  </div>

  第二种方法是根据animate的方法来移动

  animate(params, [duration], [easing], [callback])

  创建自定义动画,注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

  例子:

  // 在一个动画中同时应用三种类型的效果

  $("#go")。click(function(){

  $("#block")。animate({

  width: "90%",

  height: "100%",

  fontSize: "10em", //驼峰

  borderWidth: 10

  }, 1000 );

  });

  将上面的html中的a标签去掉#toc0

  js代码

  $(".aaa")。click(function () {

  $('html,body')。animate({

  scrollTop:$(".aaa1")。offset()。top},{duration:500,easing:'swing'});

  return false;

  })

以上是“html怎么点击跳转到页面指定位置”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. HTML点击图片跳转到新页面如何实现
  2. Angular中怎么利用路由跳转到指定页面的指定位置

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:JavaScript中Object.getOwnPropertyNames()方法怎么用

下一篇:JavaScript中hasOwnProperty()方法怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》