How to scroll up or down the page to an anchor using jQuery

Question

I m looking for a way to include a slide effect for when you click a link to a local anchor either up or down the page   I d like something where you have a link like so    lt a href   nameofdivetc  gt link text  img etc  lt  a gt    perhaps with a class added so you know you want this link to be a sliding link    lt a href   nameofdivetc  class  sliding-link  gt link text  img etc  lt  a gt    Then if this link is clicked  the page slides up or down to the required place  could be a div  heading  top of page etc      This is what I had previously         document  ready function            scroll   click function event             prevent the default action for the click event         event preventDefault               get the full url - like mysitecom index htm home         var full url   this href             split the url by   and get the anchor target name - home in mysitecom index htm home         var parts   full url split               var trgt   parts 1              get the top offset of the target anchor         var target offset         trgt  offset            var target top   target offset top             goto that anchor by setting the body scroll top to anchor top            html  body   animate  scrollTop target top   1500   easeInSine

User · Answer

SS Slow Scroll

This solution does not require anchor tags but you do of course need to match the menu button (arbitrary attribute, 'ss' in example) with the destination element id in your html.

ss="about" takes you to id="about"

_x000D_

$('.menu-item').click(function() {_x000D_
 var keyword = $(this).attr('ss');_x000D_
 var scrollTo = $('#' + keyword);_x000D_
 $('html, body').animate({_x000D_
  scrollTop: scrollTo.offset().top_x000D_
 }, 'slow');_x000D_
});

_x000D_

.menu-wrapper {_x000D_
  display: flex;_x000D_
  margin-bottom: 500px;_x000D_
}_x000D_
.menu-item {_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
  flex: 1;_x000D_
  font-size: 20px;_x000D_
  line-height: 30px;_x000D_
  color: hsla(0, 0%, 80%, 1);_x000D_
  background-color: hsla(0, 0%, 20%, 1);_x000D_
  cursor: pointer;_x000D_
}_x000D_
.menu-item:hover {_x000D_
  background-color: hsla(0, 40%, 40%, 1);_x000D_
}_x000D_
_x000D_
.content-block-header {_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
  font-size: 20px;_x000D_
  line-height: 30px;_x000D_
  color: hsla(0, 0%, 90%, 1);_x000D_
  background-color: hsla(0, 50%, 50%, 1);_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<div class="menu-wrapper">_x000D_
  <div class="menu-item" ss="about">About Us</div>_x000D_
  <div class="menu-item" ss="services">Services</div>_x000D_
  <div class="menu-item" ss="contact">Contact</div>_x000D_
</div>_x000D_
_x000D_
<div class="content-block-header" id="about">About Us</div>_x000D_
<div class="content-block">_x000D_
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle._x000D_
_x000D_
That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle._x000D_
</div>_x000D_
<div class="content-block-header" id="services">Services</div>_x000D_
<div class="content-block">_x000D_
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle._x000D_
_x000D_
That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle._x000D_
</div>_x000D_
<div class="content-block-header" id="contact">Contact</div>_x000D_
<div class="content-block">_x000D_
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle._x000D_
_x000D_
That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle._x000D_
</div>

_x000D_

Fiddle

https://jsfiddle.net/Hastig/stcstmph/4/

User · Answer

following solution worked for me      a href       click function e                        e preventDefault                var aid     this  attr  href                console log aid               aid   aid replace                       var aTag      a name     aid                     if aTag    null    aTag offset      null                  aTag      a id     aid                         html body   animate  scrollTop  aTag offset   top   1000

User · Answer

Ok simplest method is   -  Within the click function  Jquery    -     html body   animate  scrollTop      resultsdiv   offset   top   slow      HTML   lt div id  resultsdiv  gt Where I want to scroll to lt  div gt

User · Answer

You should also consider that the target has a padding and thus use position instead of offset  You can also account for a potential nav bar you don t want to be overlapping the target   const  navbar       navbar        a href         on  click   function e        e preventDefault         const scrollTop               this  attr  href    position   top -          navbar outerHeight            html  body   animate   scrollTop

User · Answer

I stuck with my original code and also included a fade in  back-to-top  link making use of this code and a bit from here too   http   webdesignerwall com tutorials animated-scroll-to-top  Works well

User · Answer

My approach with jQuery to just make all of the embedded anchor links slide instead of jump instantly  It s really similar to the answer by Santi Nunez but it s more reliable   Support   Multi-framework environment  Before the page has finished loading     lt a href   myid  gt Go to lt  a gt   lt div id  myid  gt  lt  div gt       Slow scroll with anchors  function           document  on  click    a href       function e           e preventDefault            var id     this  attr  href               html body   animate  scrollTop    id  offset   top   500              jQuery

User · Answer

Assuming that your href attribute is linking to a div with the tag id with the same name  as usual   you can use this code   HTML   lt a href   goto  class  sliding-link  gt Link to div lt  a gt    lt div id  goto  gt I m the div lt  div gt    JAVASCRIPT -  Jquery       sliding-link   click function e        e preventDefault        var aid     this  attr  href           html body   animate  scrollTop    aid  offset   top   slow

User · Answer

function            a top   click function                html body   animate   scrollTop    0  1000                 Test it here    http   jsbin com ucati4

User · Answer

You may want to add offsetTop and scrollTop value in case You are animating not the whole page   but rather some nested content   e g    var itemTop      letter name    id       offset   top  var offsetTop    someWrapper offset   top  var scrollTop    someWrapper scrollTop    var y   scrollTop   letterTop - offsetTop  this manage list wrap animate     scrollTop  y    1000

User · Answer

Description  You can do this using jQuery offset   and jQuery animate      Check out the jsFiddle Demonstration   Sample  function scrollToAnchor aid       var aTag      a name     aid                html body   animate  scrollTop  aTag offset   top   slow       scrollToAnchor  id3      More Information   jsFiddle Demonstration jQuery offset   jQuery animate

User · Answer

Here is the solution that worked for me  This is a generic function which works for all of the a tags referring to a named a     a href       on  click   function event         event preventDefault         var name     this  attr  href         var target      a name      name substring 1                   html body   animate   scrollTop    target  offset   top     slow           Note 1  Make sure that you use double quotes   in your html  If you use single quotes  change the above part of the code to var target      a name      name substring 1            Note 2  In some cases  especially when you use the sticky bar from the bootstrap  the named a will hide beneath the navigation bar  In those cases  or any similar case   you can reduce the number of the pixels from your scroll to achieve the optimal location  For example     html body   animate   scrollTop    target  offset   top - 15     slow    will take you to the target with 15 pixels left on the top

User · Answer

function scroll to anchor anchor id       var tag         anchor id             html body   animate  scrollTop  tag offset   top   slow

User · Answer

This made my life so much easier  You basically put in your elements id tag and its scrolls to it without a lot of code  http   balupton github io jquery-scrollto   In Javascript      scrollto1   ScrollTo      In your html   lt div id  scroollto1  gt    Here I am all the way down the page

User · Answer

I stumbled upon this example on https   css-tricks com snippets jquery smooth-scrolling  explaining every line of code  I found this to be the best option    https   css-tricks com snippets jquery smooth-scrolling   You can go native   window scroll     top  2500     left  0     behavior   smooth        window scrollBy      top  100     could be negative value   left  0     behavior   smooth        document querySelector   hello   scrollIntoView      behavior   smooth         or with jquery      a href         not   href        not   href   0     click function event         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            event preventDefault               html  body   animate             scrollTop  target offset   top            1000

[jquery] How to scroll up or down the page to an anchor using jQuery?

SS Slow Scroll

Examples related to jquery

Examples related to jquery-plugins

Examples related to anchor

Examples related to slide