Smooth scroll to div id jQuery

Question

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

User · Answer

Here is my solution to smooth scroll to div / anchor using jQuery in case you have a fixed header so that it doesn't scroll underneath it. Also it works if you link it from other page.

Just replace ".site-header" to div that contains your header.

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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 - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});

User · Answer

This code will be useful for any internal link on the web          href         click function             id   this  attr  href              html  body   animate               scrollTop    id  offset   top            2000

User · Answer

Here s what I use     lt  -- jquery smooth scroll to id s -- gt      lt script gt    function          a href     not  href       click function         if  location pathname replace              this pathname replace            amp  amp  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                           lt  script gt    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  lt  body gt    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  lt  body gt     If you need more details on this  check out my quick post here  jQuery smooth scroll to id  Hope that helps  and let me know if you have questions about it

User · Answer

This script is a improvement of the script from Vector  I have made a little change to it  So this script works for every link with the class page-scroll in it   At first without easing      a page-scroll   click function         var targetDiv     this  attr  href           html  body   animate           scrollTop    targetDiv  offset   top        1000         For easing you will need Jquery UI    lt script src  https   ajax googleapis com ajax libs jqueryui 1 11 4 jquery-ui min js  gt  lt  script gt    Add this to the script    easeOutExpo    Final     a page-scroll   click function         var targetDiv     this  attr  href           html  body   animate           scrollTop    targetDiv  offset   top        1000   easeOutExpo          All the easings you can find here  Cheat Sheet

User · Answer

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

User · Answer

This is the simplest Source-https   www w3schools com jsref met element scrollintoview asp  var elmnt   document getElementById  content    elmnt scrollIntoView

User · Answer

Plain JS  Can be done in plain JS if you use modern browsers  document      getElementById  quot range-calculator quot        scrollIntoView   behavior   quot smooth quot       Browser support is a bit issue  but modern browsers support it

User · Answer

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    lt script src    path to the jquery scrollTo js file  gt  lt  script gt

User · Answer

one example more   HTML link    lt a href   featured  class  scrollTo  gt Learn More lt  a gt    JS         scrollTo   on  click   function e         e preventDefault         var target     this  attr  href            html  body   animate          scrollTop     target  offset   top          2000           HTML anchor      lt div id  featured  gt My content here lt  div gt

User · Answer

You can do it by using the following simple jQuery code   Tutorial  Demo  and Source code can be found from here - Smooth scroll to div using jQuery  JavaScript     function            a href     not  href       click function             var target     this hash           target   target length   target       name     this hash substr 1                 if  target length                   html body   animate                 scrollTop  target offset   top                1000               return false                          HTML    lt a href   section1  gt Go Section 1 lt  a gt   lt div id  section1  gt       lt  -- Content goes here -- gt   lt  div gt

User · Answer

here is my 2 cents   Javascript        scroll   click function            body   animate           scrollTop  eval           this  attr  target    offset   top - 70         1000         Html    lt a class  scroll  target  contact  gt Contact lt  a gt    and the target    lt h2 id  contact  gt Contact lt  h2 gt

User · Answer

This works to me    lt div id  demo  gt           lt h2 gt Demo lt  h2 gt   lt  div gt   lt script src  https   code jquery com jquery-1 10 2 js  gt  lt  script gt   lt script gt        document  ready function                 Handler for  ready   called             html  body   animate               scrollTop      demo   offset   top             slow             lt  script gt    Thanks

User · Answer

Here I tried this  that work great for me      a href         on  click   function  e        e preventDefault            html  body   animate           scrollTop      this  attr  href    offset   top        500   linear          HTML     lt a href   fast-food  class  active  data-toggle  tab   gt FAST FOOD lt  a gt    lt div id  fast-food  gt   lt p gt  Scroll Here     lt  p gt     lt  div gt

User · Answer

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

[javascript] Smooth scroll to div id jQuery

Examples related to javascript

Examples related to jquery

Examples related to scroll