Where can i add a button that directly scrolls down to a button?

Developer Support CMS Development
1

Hello guys , I have a question that is with in the template.
Where can i create a button that directly scrolls down to an image inside the template.

2

To create an anchor link to something that is on the same page you have to add an id to the element you want to scroll to, then change the href of the button to that id e.g. <img id=“anchorimage” src=“…”> and <a href=“#anchorimage”> (using an anchor <a> element and styling it as a button is easier than using a <button> element which doesn’t have an href attribute).

3

Hey @Sergelen

To piggyback on @piersg 's answer:

If you would like a scroll animtion to take place you could use something like this (assuming you switch to a anchor tag):

$(document).on('click', function(e) {
 if ( e.target.hash.indexOf('#') == 0 ) {

 e.preventDefault();

 var link = e.target.hash;

 $([document.documentElement, document.body]).animate({
 scrollTop: $(link).offset().top
 }, 'fast');
 }
});

This script fires when the user clicks a link that has a “#” as the first character, then scrolls to that anchor.

4

@Kevin-C you can also do this with scroll-behaviour property

html {
 scroll-behavior: smooth;
}
5

@piersg YES! much more elegant!

6

+1 to the scroll-behavior, but remember that not all browsers support it. I am lookinig at you, safari and IE!