Button for scrolling to the last block of a page (macro with Kits)

Customization Look what I built
6

This is brilliant, thank you! Just finding the last child of the containing element, then using setTimeOut() to re-run the function and the button event simplifies things beautifully.

I was able to use your code to update it to be selective for whether the button is clicked in the sidebar or in the main view:

  • Instead of using document.querySelector(), use e.target.closest() to get the correct .blocks-container
  • If the last child div.w-full contains a link (the “More” link in the sidebar), simulate a mouse click

I also added a comment on using scrollIntoView({ block: 'end' }), for users who may want the scroll only to proceed until the block is fully visible.

Here’s the code. Now working in the sidebar, including when the page is open both in main view and sidebar!

const Kits = logseq.Module.Kits;

const doClick = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true,
});

logseq.kits.scrolltolastblock = Kits.addClickEventToButton.bind(
  null,
  function onClickScrollToLastBlock(e) {
    const div = e.target.closest('.blocks-container > div > div').lastChild;
    div.scrollIntoView(); // to scroll only until div aligns with the bottom of the viewport, change to `div.scrollIntoView({ block: 'end' })`
    if (div.classList.contains('w-full')) {
      const link = div.querySelector(':scope > a');
      if (link) link.dispatchEvent(doClick);
      setTimeout(onClickScrollToLastBlock, 250, e);
    }
  }
);
4 Likes