Is the window.scrollTo() function in JavaScript not available in Spotfire?

[Eunse LEE]

I am building a dashboard screen using Spotfire.
As I build the dashboard, the height of the dashboard increases.
For the UI/UX convenience of the dashboard users, I wanted to create a button to scroll up to the top of the screen and a button to scroll down to the bottom of the screen.
I attempted to develop these buttons utilizing the Text Area's HTML Editor.
I used the window.scrollTo() function in JavaScript, but it didn't work.
I replaced it with the window.open() function and it worked perfectly, so I don't think it was a JavaScript syntax error.
Is the window.scrollTo() function not available in Spotfire?

Edited March 8 by Eunse LEE

[Eunse LEE]

18 minutes ago, Eunse LEE said:

I am building a dashboard screen using Spotfire.
As I build the dashboard, the height of the dashboard increases.
For the UI/UX convenience of the dashboard users, I wanted to create a button to scroll up to the top of the screen and a button to scroll down to the bottom of the screen.
I attempted to develop these buttons utilizing the Text Area's HTML Editor.
I used the window.scrollTo() function in JavaScript, but it didn't work.
I replaced it with the window.open() function and it worked perfectly, so I don't think it was a JavaScript syntax error.
Is the window.scrollTo() function not available in Spotfire?

Sorry, I forgot to attach my code. The following is a capture of the JavaScript portion of my HTML code.

[Jose Leviaguirre]

Hello Eunse, 

Spotfire does not uses the window.scrollTo, but rather a div that contains the visualization that shows the scrollbar when needed. 

Please be careful when modifying things that are outside the scope of the text area as Spotfire can break or work unexpectedly. For that reason, please refer to the JavaScript best practices article on Text areas so, use the following code at your own risk

<div id="scrollButtons" style="text-align:center;background:beige;border:1px solid;cursor:pointer; gray;padding:5px;position:fixed;right:30px;top:50vh;color:black;z-index:1">
  <div id="sTop" title="scroll to top">▲</div>
  <div id="sBottom" title="scroll to bottom">▼</div>
</div>

 <script>
 

function checkScrollbar() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    const scrollButtons = document.getElementById('scrollButtons');
    if (scrollableElement && scrollableElement.scrollHeight > scrollableElement.clientHeight) {
        scrollButtons.style.display = 'block';
    } else {
        scrollButtons.style.display = 'none';
    }
}

// Call checkScrollbar on page load
checkScrollbar();

// Call checkScrollbar whenever the window is resized
window.addEventListener('resize', checkScrollbar);

document.getElementById('sTop').addEventListener('click', function() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    if (scrollableElement) scrollableElement.scrollTop = 0;
});

document.getElementById('sBottom').addEventListener('click', function() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    if (scrollableElement) scrollableElement.scrollTop = scrollableElement.scrollHeight;
});

 </script>

if you want a smooth scroll, you have to create a way to mimic the smooth behavior that is not available on divs (only window.scrollTo) then do this
 

function smoothScroll(element, target, duration) {
    let start = element.scrollTop;
    let change = target - start;
    let startTime = performance.now();

    function animateScroll(currentTime) {
        let timeElapsed = currentTime - startTime;
        let progress = timeElapsed / duration;
        progress = Math.min(progress, 1);
        element.scrollTop = start + change * progress;
        if (progress < 1) {
            requestAnimationFrame(animateScroll);
        }
    }

    requestAnimationFrame(animateScroll);
}

document.getElementById('sTop').addEventListener('click', function() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    if (scrollableElement) smoothScroll(scrollableElement, 0, 500);
});

document.getElementById('sBottom').addEventListener('click', function() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    if (scrollableElement) smoothScroll(scrollableElement, scrollableElement.scrollHeight, 500);
});