Smooth Scroll Up and Down to Multiple Anchors

Question

I am new to Web Dev and I want to make a website that can scroll-up and down-to multiple anchors using the side navigation bar.

This is my html code,

<body>
 <div id="mySideDiv" class="divAnimate">
  <p id="head">HYUNJAE<br>WOO</p>
  <div class="side"><a href="#home">HOME</a></div>
  <div class="side"><a href="#portfolio">PORTFOLIO</a></div>
  <div class="side"><a href="#contact">CONTACT</a></div>
  <div class="side"><a href="#about">ABOUT</a></div>
 </div>

 <div class="mid-cont homePage" id="main">
  <article class="panel"><a id="home"></a>
   <p> Welcome to My Website </p>
   ...
  </article>

  <article class="panel"><a id="portfolio"></a>
   <p> PORTFORLIO </p><br>
   ...
  </article>

  <article class="panel"><a id="contact"></a>
   <p> CONTACT </p><br>
   ...
</article>

<article class="panel"><a id="about"></a>
  <p> ABOUT </p><br>
  ...
</article>

I have this working with just tag, but I want the smooth transition/scroll to the anchor every time I click on the side bar(my side bar is fixed in position). I have searched through the internet and found few answers using jQuery or javascript, but they ONLY WORKED WHEN IT WAS TOP-TO-BOTTOM SCROLL. Whenever I tried to go from CONTACT up to PORTFOLIO, it would place the screen somewhere between HOME and PORTFOLIO. I feel like the answer is going to be very obvious, but I can't figure out why...Please help me.

One of these links may solve your problem: https://css-tricks.com/snippets/jquery/smooth-scrolling/ http://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link — Nicholas Smith, Dec 28 '16 at 09:52
something like this http://stackoverflow.com/questions/34571656/difference-between-current-position-and-scrolled-position-with-jquery/34572021#34572021 ?? — Mi-Creativity, Dec 28 '16 at 10:00

Mohit Bhardwaj · Answer 1 · 2016-12-28T09:55:04.250

You can use following code for such functionality:

$(".same-page-links").on("click", function(e){
  e.preventDefault();
  var target = $(this).attr("href");
  if( $(""+target).length )
  {
    var targetOffset = $(""+target).offset().top;
    $("html, body").animate({"scrollTop": targetOffset}, 500);
  }
});//click

Here, I have assumed that all such links have a class "same-page-links". On click of such links, you can grab the target element's id from their href attribute or any other attribute. Once you have that, you simply need to know the offset().top of that element and scroll to that offset using jQuery animate method.

One more thing, instead of creating empty a elements to contain your target id's, you should assign those id's to those articles themselves. e.g. instead of

<article class="panel"><a id="about"></a>

you should do this

<article id="about" class="panel">

score 0 · Accepted Answer · edited May 23 '17 at 10:31

0

Did you check this answer? Your html code will be:

<div class="side"><a href="#home" onclick="SmoothScroll()">HOME</a></div>

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

edited May 23 '17 at 10:31

Community

1
1

answered Dec 28 '16 at 09:53

Aminur Rashid

741
6
13

did you check my answer? – Aminur Rashid Jan 10 '17 at 15:59

Smooth Scroll Up and Down to Multiple Anchors

2 Answers2