单击顶部导航时如何向下滚动效果(向下滑动)..?

时间:2015-04-10 12:32:50

标签: javascript html css css3

单击顶部导航时如何进行滚动效果(向下滑动)..?

Example Website

3 个答案:

答案 0 :(得分:2)

这是我创建的一个函数,它使用jQuery。因此,请确保您的HTML页面中包含jQuery。

var NCRscroll = function(){
     var animateScroll=function(e,t,n,r){r=r||-60;n=n||2e3;$(e).on("click",function(){$("html, body").animate({scrollTop:$(t).offset().top+r},n);return false})}
     /* 
        NCRScroll has four parameters link that users click on (link). Id is to where on the page you want to scrollTo (id).
        Speed is the speed at which the scroll feature goes to the section of the page that you desire.
        The default value for speed is 2000 milliseconds which is 2 seconds. So it doesn't have to be set if you like the speed.
        The last parameter is the offset which is defaulted to -60.  You can change this to your desire. -60 work in this template.
      */
      //Demo of how your call should look.
      animateScroll("#showcaselink", "#showcase", 1000, 20);
  };

然后只需调用该函数。

NCRscroll();

答案 1 :(得分:0)

HTML:

<ul id="nav">
    <li><a href="/">Home</a></li>
    <li class="dropdown">
        <a href="#">Parent</a>
        <ul class="childnav">
            <li><a href="#">Child 1</a></li>
            <li><a href="#">Child 2</a></li>
        </ul>
    </li>
</ul>

CSS:

ul.childnav {
    position:relative;
    display:none;
}

li.dropdown:hover ul.childnav {
    display:block;
}

我确定一个简单的网络搜索会给你这样的东西。

答案 2 :(得分:0)

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1000);
    return true;
    });

使用这个jQuery。