Tab Scroll

  • I've been trying to emulate a new Opera feature as described here:
    It's a mod that scrolls to top of the current page when clicking a tab and scrolls back to initial position when clicking the tab again.
    You will need a custom.js file to implement this modification. Instructions:


    function tabScroll(event) {
        const target =;
        if (target.classList.contains('tab-header') && target.hasAttribute('id')) {
            const id = target.getAttribute('id');
            if (id === 'scrollTop') {
                chrome.tabs.executeScript({code:'function pos(){var position=window.pageYOffset;window.scrollTo(0,0);return position;};pos();'}, msg);
       = 'scrollPre';
            if (id === 'scrollPre') {
                chrome.tabs.executeScript({code:'{"offset":""},function(local){var offset=local.offset;window.scrollTo(0,offset);});'});
       = 'scrollTop';
        if (target.classList.contains('tab-header') && !target.hasAttribute('id')) {
   = 'scrollTop';
    function msg(position) {
        var offset = position[0];{'offset': offset});
    function rmID() {
        const top = document.getElementById('scrollTop');
        const pre = document.getElementById('scrollPre');
        if (top) {
        if (pre) {
    // Loop waiting for the browser to load the UI. You can call all functions from just one instance.
    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
            document.body.addEventListener('click', tabScroll);
        else {
            setTimeout(wait, 300);
    }, 300);

    I'm sure this can be improved, but the current version functions. If you click on a tab, you switch to the tab. If you click the tab again, you scroll to top and if you hit the tab a third time, you scroll back to the position before you scrolled to top of page. If you have any questions about this, please let me know.

    Just found the opera blog post with the feature announcement –

  • @luetage Nice, testing.
    Good idea. I think would better a hover button to scroll up or use the favicon to do that and prevent accidental scroll-to-top.

    But it works 😛

  • @hadden89 Would be far easier to do this with a dedicated button, but the point was to emulate the request. I'm not too concerned about accidental clicking, because why should you click the title of an active tab, if you didn't want to use the functionality to go to top? And even if you click it by accident, you can just return to the previous position by clicking again 😛

  • I found out that I can just put the scrollTab.js code into custom.js. It's far easier to use one file, especially if you are using a bash script to reload the files on update. OP has been updated.

  • Thanks for making this. I have learned interesting things:

    • You can use chrome.* APIs in the context of a chrome.tabs.executeScript(). I guess chrome treats the executed script like a content script.
    • The callback function can take in the output of execution of the script. I guess I completely skipped over that part in the docs.

  • @lonm Yeah, I was surprised too. Especially that it's so easy to use the local storage when needed. The callback function from the execute script part was a fluke, I found it on stackoverflow by accident. I really wanted to avoid using multiple files and passing messages.

  • This mod stopped working on the latest snapshot (2.0), because Vivaldi registers a click on a tab with target tab-header now. Therefore the script could be simplified and it's easier triggering the function.

    OP has been updated.


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.