How to allow users scroll page to specified block

How it works

If you want to draw users’ attention to a particular block of your site, you can set up automatic scrolling to this block via a custom HTML code. You may use an existing solution or add your own code.

How to get it

Using an existing solution

1. Open your project in Publisher Account.
2. In the side bar click Site Builder.
3. Click Open Site Builder.
4. Add the Button component to the block where the scrolling should begin. Change your button text.
5. Set the component type to Link and insert any link into the field.
6. Insert the following code to the Custom code block:

<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;

var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;

var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
  var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
  scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>

7. Modify the following parameters:
   • scrollBlock — the name of the CSS class of the block that contains the scroll button. Possible options are:
     • .block--header (the Header block)
     • .block--hero (the Call-to-action block)
     • .block--packs (the Packs block)
   • scrollBlockNumber — the sequence number of the block that contains the scroll button. Minimum value is 0.
   • scrollButtonNumber — the sequence number of the scroll button. Minimum value is 0.
   • scrollToBlockName — the name of the CSS class of the block to scroll the page to. Possible options are:
     • .block--header (the Header block)
     • .block--hero (the Call-to-action block)
     • .block--html (the Custom code block)
     • .block--packs (the Packs block)
     • .block--description (the Description block)
     • .block--gallery (the Gallery block)
     • .block--requirements (the System requirements block)
     • .block--faq (the FAQs block)
     • .block--embed (the Social media widgets block)
     • .block--news (the News block)
     • .block--footer (the Footer block)
   • scrollToBlockNumber — the sequence number of the block to scroll the page to. Minimum value is 0.

8. Click Preview to see your changes.

Watch the tutorial video for this instruction:

Adding your own code

1. In the Builder, click Add block and choose Custom code.

2. Insert your own code to the block.

Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!

Useful links