How do I add javascript function on click event?

[Bindiya]

I added below function on click event. But wasnt getting expected results.

function scrollToTargetAdjusted() {
var element = document.getElementById(‘targetElement’);
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;

  window.scrollTo({
      top: offsetPosition,
      behavior: "smooth"
  });   

}

[manish-sharma]

Hi Bindiya!

You can achieve the scrollTo event in the builder.io by simply adding custom code to onClick event of a button. You can find more at Custom Code in the Builder Visual Editor.

You can also refer to the below code which worked for me. Thank you!

var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;


window.scrollTo({
  top: offsetPosition,
  behavior: 'smooth'
});

[Bindiya]

Hello Manish, I have added links as shown in [Linking within pages in Builder.io - Builder.io]. But want to add a offset to targeted id. could you help?

[manish-sharma]

Hi @Bindiya,

If you want to add an offset for scroll to the target element, I recommend binding the element with an onClick event to the links instead and adding the below lines of code to the event custom code section

var element = document.getElementById('targetElement');
var headerOffset = 45;
var elementPosition = element.getBoundingClientRect().top;
var offsetPosition = elementPosition + window.pageYOffset - headerOffset;


window.scrollTo({
  top: offsetPosition,
  behavior: 'smooth'
});

[Bindiya]

I have added below code for alphabet a onclick event.

var element = document.getElementById(‘section-a’);

var headerOffset = 80;

var elementPosition = element.getBoundingClientRect().top;

var offsetPosition = elementPosition + window.pageYOffset - headerOffset;

window.scrollTo({

top: offsetPosition,

behavior: ‘smooth’

});

Can be checked on click alphabet a from horizontal alphabet list.

https://qa.olivela.com/page/designer-directory-url-2

Offset is not getting set.

[manish-sharma]

Hi @Bindiya,

The link seems to be working for me.

Can you try console.log(offsetPosition) and check if there is an error on the js console?

[Bindiya]

Getting this error

_app-5dd6b45621fe87a7.js:1 Builder custom code error: Cannot read properties of null (reading ‘getBoundingClientRect’) in var element=document.getElementById(“targetElement”),headerOffset=75,elementPosition=element.getBoundingClientRect().top,offsetPosition=elementPosition+window.pageYOffset-headerOffset;window.scrollTo({top:offsetPosition,behavior:“smooth”}) TypeError: Cannot read properties of null (reading ‘getBoundingClientRect’)

[manish-sharma]

Hi @Bindiya,

I don’t see any id with targetElement on your page. Can you try the below code

var element=document.getElementById("section-z")

instead of

var element=document.getElementById(“targetElement”).

If you still have any issues then kindly share your builder editor content URL. Thank you!

[Bindiya]

I have added id “section-a”

[manish-sharma]

Will you be able to share your builder content link?

[Bindiya]

I appreciate your patience in dealing with this issue.

https://builder.io/content/135709f9ab83478487c9f70a4286e272/edit?activeDesignerTab=5&selectedBlock=builder-f6b86c8d22534e54835ab8431204ef4b, here is the url I’m working on.

[manish-sharma]

Sorry, you are working on localhost so that content is not accessible.

[manish-sharma]

Can you share screenshots of the code and the HTML id attribute?

[Bindiya]

https://builder.io/content/135709f9ab83478487c9f70a4286e272/edit?activeDesignerTab=5&selectedBlock=builder-f6b86c8d22534e54835ab8431204ef4b

Is this link accessible?

Also I have attached screenshots for reference.

And getting below error is console:

react_devtools_backend.js:4026 Builder custom code error: Cannot read properties of null (reading ‘getBoundingClientRect’) in var element=document.getElementById(“targetElement”),headerOffset=75,elementPosition=element.getBoundingClientRect().top,offsetPosition=elementPosition+window.pageYOffset-headerOffset;window.scrollTo({top:offsetPosition,behavior:“smooth”}) TypeError: Cannot read properties of null (reading ‘getBoundingClientRect’)

at eval (eval at stringToFunction (https://qa.olivela.com/_next/static/chunks/pages/_app-5dd6b45621fe87a7.js:1:42062), :31:106)

at c (https://qa.olivela.com/_next/static/chunks/pages/_app-5dd6b45621fe87a7.js:1:43336)

at v. (https://qa.olivela.com/_next/static/chunks/pages/_app-5dd6b45621fe87a7.js:1:52090)

at Object.Oe (https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:16874)

at Ae (https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:17028)

at https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:36850

at Or (https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:36944)

at Dr (https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:37359)

at https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:42801

at Zi (https://qa.olivela.com/_next/static/chunks/framework-fc97f3f1282ce3ed.js:1:104131)

[manish-sharma]

Hi @Bindiya,

Could you please remove the Link URL and then try since there is an onClick event which will do the scroll to the section we don’t need the Link URL.

[Bindiya]

Without link function doesnt work

[manish-sharma]

Hi @Bindiya,

I’ve got your ‘C’ working, can you check once?

[Bindiya]

Thanks Manish, it’s working as expected