CODEWITHSUNDEEP
javascriptjquerysmooth-scrolling
Ben Goldie
Ben Goldie

Reputation: 41

Smooth scrolling to anchor on another page

After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.

I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.

I want to enable smooth scrolling to an anchor on another page. e.g. from my home page "domain.com/home", click the link, then load the new page, e.g. "domain.com/contact" and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".

Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.

I'm planning to:

  1. Add the following codes to the website template's '' section (in the Joomla admin panel):

    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> 
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?

  1. Then add this code to the same section in the template:

    <script type="text/javascript" >
$('html').css({
display: 'none'
});

$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
  display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
  display: 'block'
});
}
});

function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
} 
</script>

  2. As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?

I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.

Best, Ben

Upvotes: 3

Views: 807

Answers (1)

Jake Sterling
Jake Sterling

Reputation: 83

Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).

Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.

EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:

function smoothScrollTo(anchor) {
    var scroll = new SmoothScroll();
    scroll.animateScroll(anchor);
}

Upvotes: 1

Related Questions