Smooth scroll to div id jQuery

Smooth scroll to div id jQuery

I’ve been trying to get a scroll to div id jquery code to work correctly. Based on another stack overflow question i tried the following
DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/
$(‘#myButton’).click(function() {
$.scrollTo($(‘#myDiv’), 1000);
});

But it didn’t work. It just snaps to the div. I also tried
$(‘#myButton’).click(function(event) {
event.preventDefault();
$.scrollTo($(‘#myDiv’), 1000);
});

With no progress.

Solutions/Answers:

Solution 1:

You need to animate the html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

Solution 2:

If you want to override standard href-id navigation on the page without changing the HTML markup for smooth scrolling, use this (example):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

Solution 3:

here is my 2 cents:

Related:  Passing a math operator as a parameter

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

Html:

<a class="scroll" target="contact">Contact</a>

and the target:

<h2 id="contact">Contact</h2>

Solution 4:

Here’s what I use:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

The beauty with this one is you can use an unlimited number of hash-links and corresponding ids without having to execute a new script for each.

If you’re using WordPress, insert the code in your theme’s footer.php file right before the closing body tag </body>.

If you have no access to the theme files, you can embed the code right inside the post/page editor (you must be editing the post in Text mode) or on a Text widget that will load up on all pages.

If you’re using any other CMS or just HTML, you can insert the code in a section that loads up on all pages right before the closing body tag </body>.

If you need more details on this, check out my quick post here: jQuery smooth scroll to id

Related:  How to highlight text using javascript

Hope that helps, and let me know if you have questions about it.

Solution 5:

are you sure you are loading the jQuery scrollTo Plugin file?

you might be getting a object: method not found “scrollTo” error in the console.

the scrollTO method is not a native jquery method. to use it you need to include the jquery scroll To plugin file.

ref:
http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html
http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln:
add this in the head section.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

Solution 6:

one example more:

HTML link:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML anchor:

  <div id="featured">My content here</div>