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

How to do scroll down effect(slide down) when click on top navigations..?

本文关键字：滚动 何进行 顶部 单击 导航      更新时间：2023-09-26

单击顶部导航时如何实现滚动效果（向下滑动）。。？

示例网站

下面是我创建的一个函数，它使用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();

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

使用这个jQuery。

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;
}

我相信一个简单的网络搜索就会给你这样的东西。

相关文章：