Scrolling Page Links Problem

Webdesign Help
1

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?

2

Have you tried adding this to your css

html {
  scroll-behavior: smooth;
}
3

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.

4
5

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.

6

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:

href=“yourpage.html?scrollto=scrolltohere”

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 = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    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

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

    
    });```
7

I’ve put an example here:

https://snippets.bss.design/

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

8

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:

9

@floydmanfloyd

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

$(document).ready(function () {
	$("a").on('click', function (event) {
		event.preventDefault();
		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
10

@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) {
    event.preventDefault();
    if (this.hash !== "") {
      var hash = this.hash;
      $("html, body").animate(
        {
          scrollTop: $(hash).offset().top,
        },
        800
      );
    }
  });
});

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