Scrolling Page Links Problem

Hi guys and gals.

I sometimes make sites with nav links which when clicked scroll to the relevant sections of that page. The problem is that when the page first loads and you click a scroll link it jumps to the anchor instead of scrolling. After the first click of a scroll link they all work fine. Is there a way round this?

Have you tried adding this to your css

html {
  scroll-behavior: smooth;

Hi Richards. That’s what I originally had but done it with that. I tried adding some Javascript too but still does it.

// Add smooth scrolling to all links
$(document).ready(function () {
$(“a”).on(‘click’, function (event) {
if (this.hash !== “”) {
var hash = this.hash;
$(‘html, body’).animate({
scrollTop: $(hash).offset().top
}, t);

I’m messing about with a website (Just for fun) here. The about, services and portfolio are scroll the links.

Hi kuligaposten. The smooth scrolling does work but only after clicking a scroll link for the first time. On page load and click a scroll link for the first time it just jumps to the section.

The problem is that the browser will scroll before the js gets a chance, there is a way to do it without using hashes:

on your link add:


Where scrolltohere would be the Id of your anchor

Then add below to your javascript file

$(window).on('load', function() {
    var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL =,
        sURLVariables = sPageURL.split('&'),

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    return false;

var scroll = "#" + getUrlParameter('scrollto');
console.log (scroll);

const element = document.querySelector(scroll)
const topPos = element.getBoundingClientRect().top + window.pageYOffset

  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll


I’ve put an example here:

you will have to add some js to check if the scrollto exists in the url or it will throw up an error

Hi Richards. Tried your solution but still does it. I’ve removed the smooth scroll script from the js file and just go with the CSS scroll. It’s no big deal. I was really more curious as to why it happens but I think your correct. The scripts not kicking in until the 1st links been clicked.

Thanks anyway to yourself and Kuligaposten :ok_hand:


If you prevent the default behavior on the click event, your script will work
Like this

$(document).ready(function () {
	$("a").on('click', function (event) {
		if (this.hash !== "") {
			var hash = this.hash;
			$('html, body').animate({
				scrollTop: $(hash).offset().top
			}, 800);

you didn’t defined the variable t so I wrote a number 800

1 Like

@kuligaposten You are the man :ok_hand: That worked apart from it disabled non-scrolling links from working on the home page and all links on the other pages. My probably not correct solution is - I gave the scroll links a class of scroll and put the js in it’s own file. The new files set to only be visible on pages with scroll links.

//scroll links

$(document).ready(function () {
  $(".scroll").on("click", function (event) {
    if (this.hash !== "") {
      var hash = this.hash;
      $("html, body").animate(
          scrollTop: $(hash).offset().top,

I forgot the site has a password so I’ve removed it. The website