ScrollintoView issue using Anchor tag

0
Hi everyone, I am trying to scroll to some point(point a) on the page when a button is clicked. I have used anchor tag and the below html snippet. document.getElementsByClassName("anchor1")[0].scrollIntoView({behavior: "smooth",block: "start"});   It is working perfectly fine and on the same page i have one more snippet in which on another button click i should scroll to some other point(point b). So i have created one more anchor(anchor2) and another html snippet document.getElementsByClassName("anchor2")[0].scrollIntoView({behavior: "smooth",block: "start"}); But for the second button even thought he scroll is working it is throwing java script error "Error while evaluating javascript input: TypeError: Cannot read property 'scrollIntoView' of undefined"   I have tried using scrolltoanchorwithoutcontext tag also but is not working as expected. It will take me to the top of the page on button click not on the place where the anchor is kept. Request to provide solution asap.   Thanks Salma
asked
4 answers
1

It means the JavaScript code can not find the Anchor2 HTML element. This is either a misspelling error from your side, or, more probable, a timing issue for the JavaScript code from the HTML snippet.

if you Anchor2 is loaded after the HTML snippet code targeting that element, this error occurs.

It is tricky to fix this issue. Best is a custom widget for it, in that way both are loaded at the same time. Otherwise make sure the HTML snippet is loaded after the Anchor2 element, by placing it under it in the page in the Modeler. Does the Anchor2 object have conditional visibility on it? Those elements are somehow loaded last when rendering the page.

answered
1

Just experienced this issue and like you guys said above, it’s likely caused by a spelling error.  In my case, I’m using this widget in multiple places on my page and I misspelled the word ‘Tools’.  Once I fixed this in the widget and on the class I was pointing it to, that fixed the issue.  Hope this helps!

answered
0

Thanks Ivo for the response.

I have tried loading HTML snippet after Anchor2 element. Yes, the anchor2 object have conditional visibility. As soon as the button is clicked it will get hidden showing some new content. Is there any other easy way other than custom widget as i am new to mendix and not implemented it.

Appreciate a quick response.

 

Thanks Salma

answered
0

If it is conditionally visible I would go as follows:

  1. Make sure the HTML snippet is placed UNDER the Anchor2 element on the Mendix page;
  2. Make sure the widget listens to the context DataView object;
  3. On the event of making the Anchor2 object visible, make sure the DataView entity is refreshed

 

The refresh of the DataView entity will trigger the context aware HTML snippet in reloading. Possibly add a minor timeout in the JavaScript code to make sure the code is fired after the page is loaded.

answered