zoukankan      html  css  js  c++  java
  • jQuery锚链接滑动效果

    $(function(){
        $("ul li a").click(function(){
            var hr = $(this).attr("href");
            var anh = $(hr).offset().top;
            $("html,body").stop().animate({scrollTop:anh},2000);
        })
    })
    ul{
        position:fixed;
        top:0;
        background:#999999;
        }
        
    ul li{
        float:left;
        margin:10px;
        padding:10px;}
    <ul>
        <li><a href="#us">111111</a></li>
        <li><a href="#about">22222</a></li>
        <li><a href="#prouct">33333</a></li>
        <li>44444</li>
        <li>55555</li>
        <li>66666</li>
    </ul>
    <div style="clear:both;"></div>
    <div id="us" style="height:820px; background:#6699CC; 100%;"></div>
    <div id="about" style="height:820px; background:#0066CC; 100%;"></div>
    <div id="prouct" style="height:820px; background:#003366; 100%;"></div>

    同一个页面中做锚链接,可以点击元素,让页面跳到指定位置。

    现在做的这个效果,不是突默认的瞬间跳到指定位置,而是滑动。这样的用户体验会好些。

    思路:

      1.获取到需要跳到页面地方的元素,想对于页面顶部的距离 $(hr).offset().top;

      2.将这个值给html或body元素,让其滚动条,执行一个animate动画。这个动画,是改变浏览器滚动条相对顶部的值。

    注意:

    1.$(this).attr("href");这返回期,正好可以做为JQuery的选择器。

    2..stop()防止不停点击,会不停产生动画列队的bug.

    参看网站:http://doubleleft.com/
  • 相关阅读:
    收音机原理
    S3C2440之存储控制器学习记录
    南校十二天集训游记
    题解 洛谷 P2179 【[NOI2012]骑行川藏】
    题解 SP3734 【PERIODNI
    题解 洛谷 P4177 【[CEOI2008]order】
    题解 CF613D 【Kingdom and its Cities】
    题解 UVA11865 【Stream My Contest】
    题解 洛谷 P2046 【[NOI2010]海拔】
    Spring Bean管理(注解的方式)
  • 原文地址:https://www.cnblogs.com/lufy/p/2501153.html
Copyright © 2011-2022 走看看