Scroll to page

[laaragm]

Hi! Is it possible to scroll to a particular page given a certain document? Is it something you'd consider for the future? Thanks.

[zhongshuai-cao]

it could be very helpful to include this function!

[karam-khanna]

+1 on this

[VAJRESH]

@cyntler can you assign this to me, I can set default page for pdf

[mathieugruson]

Hello @VAJRESH Do you know when will be included that feature ? Thanks

For anybody coming here, this is a way I have found to solve this problem by selecting the html tag of the good page and scrolling to there and adding some wait time to let the doc to load

      useEffect(() => {

        const handleSetDocs = (() => {

               // Delay scrolling until the element is likely to be loaded
                const timer = setTimeout(() => {
                    
                    const element = document.getElementById("lolo");
                    console.log('element\n', element);
                    const elementsArray = document.querySelectorAll('.sc-bjfHPd.kQleml');
                    if (elementsArray.length > 0) {
                        console.log('elementsArray\n', elementsArray);
                        const ElementPage = elementsArray[(props.pageToDisplay - 1)].getBoundingClientRect();
                        if (element) {
                          console.log('c2: ', ElementPage.top);
                            element.scrollTo(0, ElementPage.top )
                          }
                    }
                    
                }, 2500); // Delay for X milliseconds (1 second)
            
                return () => clearTimeout(timer); // Cleanup the timer

            })

        handleSetDocs();


    }, [props.pageToDisplay])

[angeal-chw]

Hi everyone, just checking if anyone have a better solution to this issue? The above useEffect code is buggy for me as it requires the document to be loaded before the scrolling happens, occasionally a bug occurs where the scrolling causes the document to scroll to a random page. Thanks in advance!

[jooskesters]

I'm not getting this code to work. When I log what's inside const element it says null. What Id should I pick there ?

When i pick react-doc-viewer as id, I get the following console output, but no scrolling is taking place ...

Support for scroll to page would be a huge improvement, please implement it in the package...