zoukankan      html  css  js  c++  java
  • html锚点 点击跳转到页面指定位置

    本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣。

    这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:“点击跳转到页面指定位置”,找了下,原来专业术语叫:锚点。

    度娘真是个博大精深的地方,有着多种的方法可以使用。

    最简单的一种:

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

    <div class="skip" id="skip">
        <h2>目录</h2>
        <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({ 
         "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;
    })

    以上总结的两种是常用且兼容比较好的,较为简单的

    也可参考复杂的案例

    http://www.jb51.net/article/96574.htm

    http://bbs.csdn.net/topics/390960199?page=1

  • 相关阅读:
    修改Win7远程桌面端口【适用XP/2003】
    Mysql Select语句详情
    SqlServer之连接
    MySql数据类型分析(日期时间类型) Part5
    MySql数据类型分析(银行家舍入法) Part3
    MySql数据类型分析(数值(小数型)类型) Part2
    MySql数据类型分析(数值(整形)类型) Part1
    WP系统一次订阅,终身锁屏同时显示农历和天气
    c# 操作 XML(增 ,删 , 改 , 查)
    Postgresql 读取txt到DB 插入或更新
  • 原文地址:https://www.cnblogs.com/web1/p/7039640.html
Copyright © 2011-2022 走看看