CODEWITHSUNDEEP
c#jqueryasp.netcssscroll
Amitesh
Amitesh

Reputation: 435

how to scroll to a position in a page by clicking on link

Hi coder i am new to jquery. i serach alot but fail to find this what i am looking is not a customize application, i just want process or method how we can achieve this.

Suppose i have a menu or link like below

  • Home
  • About
  • Contact

As a link or menu and when i click on that any of the link or menu i srcoll down to position of the page where details for it present..

Just like This link where click on the above menu scroll to the position of it on the page

This should be a single page application.

Any idea's or tutorial for this i want to do it jquery.

I can use scrollup(), scroll(), animate() but how to proceed this that is the main concren any help would be appreciated.

Upvotes: 0

Views: 983

Answers (3)

amitesh
amitesh

Reputation: 860

This is the best link for your solution Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation

In this link you get how to stick your menu using this

 $(window).scroll(function () {
        var window_top = $(window).scrollTop()+12; // the "12" should equal the margin-top value for nav.stick
        var div_top = $('#nav-anchor').offset().top;
        if (window_top > div_top) {
            $('nav').addClass('stick');
        } else {
            $('nav').removeClass('stick');
        }
    });

use scrollto.js file to scroll through the page and call it in that function for smooth scrolling 

 $("nav a").click(function (evn) {
        evn.preventDefault();
        $('html,body').scrollTo(this.hash, this.hash);
    });

I hope this will help you

Upvotes: 1

Ammy T
Ammy T

Reputation: 551

$('html,body').animate({scrollTop: $('#scrollToId').offset().top});

Check this solution jQuery scroll to element

Upvotes: 0

Koby Yehezkel
Koby Yehezkel

Reputation: 218

Are you by any chance talking about HTML anchors? http://www.echoecho.com/htmllinks08.htm

Upvotes: 2

Related Questions