开发者

scrolling in same page

I would like to do the same as what is here

In this site there is top static menu some if i click 开发者_如何转开发download ,it will take me to scroll page.

How to do this?


To do something like that site, put the contents of your site in <div>s and set their id attributes. Then, do something like this to scroll to a specific div.

For the Javascript/jQuery stuff, you can either bind to each <a> element's click event, or you can just specify the onclick="goToByScroll('insertMyDivIdHere')" attribute in the HTML.

Edit: To keep the navigation menu visible at all times, fix its position on the page. Here's the CSS uses to accomplish this:

#top-bar-menu {
    -moz-box-shadow: 0 1px 5px #210634;
    background: none repeat scroll 0 0 #501E73;
    border-bottom: 1px solid #300B4C;
    float: left;
    font-size: 15px;
    height: 24px;
    left: 0;
    line-height: normal;
    list-style: none outside none;
    margin: 0;
    padding: 9px 0 3px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 95;
}


Using jQuery it is very easy.

The sample code is used to scroll to the top of the page, similarly you can change the value and can go to any part of the page. Here the value is 0. 700 is the duration in which it will take you to the top portion of the webpage

$('html,body').animate({ scrollTop: 0 }, 700);

Hope this will help you : )

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜