Transition to an anchor on a page

Question

I have my navigation links at the top of my page. I have each link anchored to it's respective div further down the page. I can't get it to transition, it just automatically jumps. I have tried the solution at Scrolling to an Anchor using Transition/CSS3. My code is:

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#home" onclick="test('home'); return false;">HOME</a></li>
    <li><a href="#about" onclick="test('about'); return false;"> ABOUT</a></li>
    <li><a href="#portfolio" onclick="test('portfolio'); return false;"> PORTFOLIO</a></li>
    <li><a href="#projects" onclick="test('projects'); return false;"> PROJECTS</a></li>
    <li><a href="#contact" onclick="test('contact'); return false;"> CONTACT</a></li>
  </ul>

<div class = "vertSpace" id = "home">
<div class="jumbotron">
  <h1>Join The Information Superhighway For Free</h1>
  <hr>
  <p></p>
</div>
</div>

<div class = "vertSpace" id = "about">
<div class="jumbotron">
  <h1>About Me</h1>
  <hr>
  <p></p>
</div>
</div>

Javascript

function scrollTo(to, duration) {
if (document.body.scrollTop == to) return;
var diff = to - document.body.scrollTop;
var scrollStep = Math.PI / (duration / 10);
var count = 0, currPos;
start = element.scrollTop;
scrollInterval = setInterval(function(){
    if (document.body.scrollTop != to) {
        count = count + 1;
        currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
        document.body.scrollTop = currPos;
    }
    else { clearInterval(scrollInterval); }
},10);
}

function test(elID)
{
    var dest = document.getElementById(elID);
    scrollTo(dest.offsetTop, 500);
}

score 1 · Accepted Answer · answered Jan 27 '17 at 16:03

I have a codepen already made regarding this issue here.

The best JS function to do the "smooth scroll" is this:

$(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
        }, 1000);
        return false;
      }
    }
  });
});

score 0 · Answer 2 · answered Jan 27 '17 at 16:02

0

You need to pass it the event to stop it doing its default action and jumping to the element.

function test(e, elID)
{
    e.preventDefault();
    var dest = document.getElementById(elID);
    scrollTo(dest.offsetTop, 500);
}

And in the HTML

onclick="test(event, 'about');"

answered Jan 27 '17 at 16:02

Paul Thomas

2,756
2
16
28

I added that code and now it's not even going to the anchor. I may be doing it wrong. I am very new to Javascript. Updated pen. – Joe Elmore Jan 27 '17 at 16:08

score 0 · Answer 3 · answered Jan 27 '17 at 16:06

Here's a simple jQuery solution:

var $root = $('html, body');
$('ul li a').click(function () {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

score 0 · Answer 4 · answered Jan 27 '17 at 16:26

It's possible to solve this using your original implementation and without jQuery:

Firstly, it is throwing an error that 'element' is undefined; you should replace it with:

document.body.scrollTop;

Also for better re-usability, I suggest you use eventListeners instead of onclick.

http://codepen.io/kevinfarrugia/pen/KayVLb

Transition to an anchor on a page

4 Answers4