Jquery Smooth Scroll To DIV - Using ID value from Link

Question

So i m having some issues with my JQuery which is suppose to scroll to particular divs   HTML   lt div id  searchbycharacter  gt       lt a class  searchbychar  href     id   0-9  onclick  return false  gt 0-9   lt  a gt        lt a class  searchbychar  href     id   A  onclick  return false  gt  A   lt  a gt        lt a class  searchbychar  href     id   B  onclick  return false  gt  B   lt  a gt        lt a class  searchbychar  href     id   C  onclick  return false  gt  C   lt  a gt           Untill Z  lt  div gt    lt div id  0-9  gt       lt p gt some content lt  p gt   lt  div gt    lt div id  A  gt       lt p gt some content lt  p gt   lt  div gt    lt div id  B  gt       lt p gt some content lt  p gt   lt  div gt    lt div id  C  gt       lt p gt some content lt  p gt   lt  div gt       Untill Z   JQuery  What i want the code to do is  On click event of an  searchbychar A TAG   Take the ID attributes value and scroll to that          searchbychar    click function             html  body   animate           scrollTop      searchbychar   attr  id   offset   top        2000

User · Answer

You can do this       searchbychar   click function          var divID         this id         html  body   animate           scrollTop    divID  offset   top        2000         F Y I    You need to prefix a class name with a    dot  like in your first line of code      searchbychar    click function     Also  your code     searchbychar   attr  id   will return a string ID not a jQuery object  Hence  you can not apply  offset   method to it

User · Answer

Here is my solution     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    With just this snippet you can use an unlimited number of hash-links and corresponding ids without having to execute a new script for each   I already explained how it works in another thread here  https   stackoverflow com a 28631803 4566435  or here s a direct link to my blog post   For clarifications  let me know  Hope it helps

User · Answer

Ids are meant to be unique  and never use an id that starts with a number  use data-attributes instead to set the target like so     lt div id  searchbycharacter  gt       lt a class  searchbychar  href     data-target  numeric  gt 0-9   lt  a gt        lt a class  searchbychar  href     data-target  A  gt  A   lt  a gt        lt a class  searchbychar  href     data-target  B  gt  B   lt  a gt        lt a class  searchbychar  href     data-target  C  gt  C   lt  a gt           Untill Z  lt  div gt    As for the jquery      document  on  click    searchbychar   function event        event preventDefault        var target         this getAttribute  data-target           html  body   animate           scrollTop    target  offset   top        2000

[javascript] Jquery Smooth Scroll To DIV - Using ID value from Link

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to parsing