Scrolling to a div using jquery

Question

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

http://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery — atmd, Apr 08 '15 at 12:56
"but with no animation" means the jQuery code snippet actually fails and what you get is the default behavior of the browser. — Ram, Apr 08 '15 at 12:57
change `var target = $(this.href);` to `var target = this.href;` then the code should work — Girish, Apr 08 '15 at 12:59

Ram · Answer 1 · 2015-04-08T13:22:04.397

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

score 1 · Answer 2 · answered Apr 08 '15 at 13:06

$(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");
  }
});

Pape · Accepted Answer · 2015-04-08T13:18:51.767

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/

score 1 · Answer 4 · answered Apr 08 '15 at 13:10

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

Scrolling to a div using jquery

4 Answers4

> Object[]