CODEWITHSUNDEEP
javascriptjquery
anyavacy
anyavacy

Reputation: 1697

Scrolling to a div using jquery

I have a question that was answered before probably, but I was not able to make a code work.

I have an <a href="#page-contact">, and once the user click on it, it should scroll down (with animation) to a div with id "page-contact". It does take me to the form but with no animation

Here is the code:

<li class=""><a href="#page-contact">Contact</a></li>


<section id="page-contact" class="page-contact">
</section>

 $('.page-contact').on('click', function(event) {
    var target = $(this.href);
    if( target.length ) {
       event.preventDefault();
       $('html, body').animate({
         scrollTop: $("#page-contact").offset().top
    }, "slow");
  }
});

Upvotes: 1

Views: 997

Answers (4)

Ram
Ram

Reputation: 144659

One reason is href property returns the absolute path of the anchor, i.e. "http://www.example.com#hash". As jQuery can't find the target element the length of the collection is 0 and the if block is not executed.

Either use this.getAttribute('href') which returns the original href attribute or the hash property that returns hash segment of the href attribute instead of the href property.

var target = $(this.hash); // $('#page-contact')

Also note that your click handler is bound to the target section element not the a element.

$('li a').on('click', function(event) {
    var target = $(this.hash);
    if( target.length ) {
       event.preventDefault();
       $('html, body').animate({
         scrollTop: target.offset().top
        }, "slow");
     }
});

Upvotes: 1

Pape
Pape

Reputation: 291

Actually something really small..

$('.page-contact').on('click', function(event) {
     //..
};

You connect this to a click on the target div, not the button. Connect to event to a class that your button has and it will work.

$('#scrollButton').on('click', function(event) {
    var target = $(this.hash);
    if( target.length ) {
        event.preventDefault();    
        $('html, body').animate({
            scrollTop: target.offset().top
        }, "slow");
    }
});

Fiddle to try out: http://jsfiddle.net/Macavity/xeqmnoLL/2/

Upvotes: 1

Jai
Jai

Reputation: 74738

Your selector is wrong, change to this:

$('a[href="#page-contact"]').on('click', function(event) {
    var target = this.getAttribute("href");
    if($(target).length) {
       event.preventDefault();
       $('html, body').animate({
           scrollTop: $("#page-contact").offset().top
       }, "slow");
    }
});

Upvotes: 1

Girish
Girish

Reputation: 12117

$(this.href) not valid selector so target variable always empty, change var target = $(this.href); to var target = this.href; to get link

$(this.href) seletor work as.

$("http://stackoverflow.com/questions/29515247/scrolling-to-a-div-using-jquery#29515468")

> Object[]

 $('.page-contact').on('click', function(event) {
    var target = this.href;
    if( target.length ) {
       event.preventDefault();
       $('html, body').animate({
         scrollTop: $("#page-contact").offset().top
    }, "slow");
  }
});

Upvotes: 1

Related Questions