☰

TesterTV_ScrollButtons

Buttons for quick scrolling in different directions.

// ==UserScript==
// @name         TesterTV_ScrollButtons
// @namespace    https://gf.qytechs.cn/ru/scripts/482232-testertv-scrollbuttons
// @version      2023.11.29
// @description  Buttons for quick scrolling in different directions.
// @license      GPL version 3 or any later version
// @author       TesterTV
// @match        *://*/*
// @grant        GM_openInTab
// @grant        GM.setValue
// @grant        GM.getValue
// ==/UserScript==

(function() {

//********************************************************************************************************************
//***                                              Variables 🇻​🇦​🇷                                              ***
//********************************************************************************************************************
    // General variables
    var ButtonsOpacityDefault = '0.05';
    var ButtonsOpacityMouseOver = '1';
    var PositionHorizontalRight = (document.documentElement.clientWidth - 81) + 'px';
	var PositionHorizontalLeft= '15px';
    var ButtonSize = '66px';
    var FontSize = '50px';

    // Check if current window is an iframe
    var isInIframe = window !== window.top;

//********************************************************************************************************************
//***                                                Button ⬆️                                                    ***
//********************************************************************************************************************

    // Create the button element
    var TopSideButton = document.createElement('button');
    TopSideButton.innerHTML = '⬆️';
    TopSideButton.style.height = ButtonSize;
    TopSideButton.style.width = ButtonSize;
    TopSideButton.style.fontSize = FontSize;
    TopSideButton.style.position = 'fixed';
    TopSideButton.style.left = PositionHorizontalRight;
    TopSideButton.style.top = '42%';
    TopSideButton.style.transform = 'translateY(-50%)';
    TopSideButton.style.opacity = ButtonsOpacityDefault;
    TopSideButton.style.background = 'transparent';
    TopSideButton.style.border = 'none';
    TopSideButton.style.outline = 'none';
    TopSideButton.style.zIndex = '9996';
    TopSideButton.id="TopSideButton";

    // Hide the button if in an iframe
    if (isInIframe) {
        TopSideButton.style.display = 'none';
    }

    document.body.appendChild(TopSideButton);

//********************************************************************************************************************
//***                                     Button - Functionality ⬆️⚙️                                             ***
//********************************************************************************************************************

    // Function to scroll to the top of the page
    function scrollToTop() {
        window.scrollTo(0, 0);
    }

    // Add event listener to scroll when button is clicked
    TopSideButton.addEventListener('click', scrollToTop);

    // Show TopSideButton when mouse cursor is over it
    TopSideButton.addEventListener('mouseenter', function() {
        TopSideButton.style.opacity = ButtonsOpacityMouseOver;
    });

    // Hide TopSideButton when mouse cursor leaves it
    TopSideButton.addEventListener('mouseleave', function() {
        TopSideButton.style.opacity = ButtonsOpacityDefault;
    });

//********************************************************************************************************************
//***                                                Button ⬇️                                                    ***
//********************************************************************************************************************

    // Create the button element
    var BottomSideButton = document.createElement('button');
    BottomSideButton.innerHTML = '⬇️';
    BottomSideButton.style.height = ButtonSize;
    BottomSideButton.style.width = ButtonSize;
    BottomSideButton.style.fontSize = FontSize;
    BottomSideButton.style.position = 'fixed';
    BottomSideButton.style.left = PositionHorizontalRight;
    BottomSideButton.style.top = '58%';
    BottomSideButton.style.transform = 'translateY(-50%)';
    BottomSideButton.style.opacity = ButtonsOpacityDefault;
    BottomSideButton.style.background = 'transparent';
    BottomSideButton.style.border = 'none';
    BottomSideButton.style.outline = 'none';
    BottomSideButton.style.zIndex = '9998';
    BottomSideButton.id="BottomSideButton";

    // Hide the button if in an iframe
    if (isInIframe) {
        BottomSideButton.style.display = 'none';
    }

    document.body.appendChild(BottomSideButton);

//********************************************************************************************************************
//***                                     Button - Functionality ⬇️⚙️                                             ***
//********************************************************************************************************************

    // Function to scroll to the bottom of the page
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }

    // Add event listener to scroll when button is clicked
    BottomSideButton.addEventListener('click', scrollToBottom);

    // Show BottomSideButton when mouse cursor is over it
    BottomSideButton.addEventListener('mouseenter', function() {
        BottomSideButton.style.opacity = ButtonsOpacityMouseOver;
    });

    // Hide BottomSideButton when mouse cursor leaves it
    BottomSideButton.addEventListener('mouseleave', function() {
        BottomSideButton.style.opacity = ButtonsOpacityDefault;
    });

//********************************************************************************************************************
//***                  Load buttons options -buttons horizontal position and visibility 🔄                         ***
//********************************************************************************************************************

    GM.getValue("SideButtonsOption", "").then(function(value) {
		// Check if the script is running in an iframe
		if (window.self !== window.top) {
			// Hide the buttons in iframes
			TopSideButton.style.display = 'none';
			BottomSideButton.style.display = 'none';
		} else {
			// Retrieve the value of SideButtonsOption using GM.getValue (DropDown1)
			GM.getValue("SideButtonsOption", "").then(function(value) {
				if (value === '0'|| value === '') {
					TopSideButton.style.left = PositionHorizontalRight;
					BottomSideButton.style.left = PositionHorizontalRight;
					TopSideButton.style.display = 'block';
					BottomSideButton.style.display = 'block';
				} else if (value === '1') {
                    TopSideButton.style.left = PositionHorizontalLeft;
					BottomSideButton.style.left = PositionHorizontalLeft;
					TopSideButton.style.display = 'block';
					BottomSideButton.style.display = 'block';
				} else if (value === '2') {
                    TopSideButton.style.display = 'none';
					BottomSideButton.style.display = 'none';
				}
			});
		}
    });

//********************************************************************************************************************
//***                      Load buttons options -buttons Vertical position and visibility 🔄                       ***
//********************************************************************************************************************

    GM.getValue("SideButtonsSliderOption", "").then(function(value) {
        TopSideButton.style.top = 'calc(' + value + '%)';
        BottomSideButton.style.top = 'calc(' + (100 - value) + '%)';
    });

//********************************************************************************************************************
//***             Check if only media is visible 🔄🎵🎬 Check if YouTube full screen is visible                    ***
//********************************************************************************************************************
    function checkButtonState() {


        // Don't show buttons if only media is visible
        // Get the current URL
        var currentUrl = window.location.href;

        // Check if the last letters in the URL are extension
        var fileExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "apng", "webm", "mp4", "webm", "mp3", "wav", "ogg" ];
        var isMatch = fileExtensions.some(function(extension) {
            return currentUrl.slice(-extension.length) === extension;
        });

        // Check if the YouTube in full screen
        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

        //If only media or full screen than hide buttons
        if (isMatch || isFullScreen) {
            TopSideButton.style.visibility = 'hidden';
            BottomSideButton.style.visibility = 'hidden';
            BottomButton.style.visibility = 'hidden';
        } else {
            TopSideButton.style.visibility = 'visible';
            BottomSideButton.style.visibility = 'visible';
            BottomButton.style.visibility = 'visible';
        }
    }
    // Check the button state every second
    setInterval(checkButtonState, 1000);

//********************************************************************************************************************
//***                                             Bottom button ⬆️                                                 ***
//********************************************************************************************************************

    // Create the button element
    var BottomButton = document.createElement('button');
    BottomButton.innerHTML = '⬆️';
    BottomButton.style.height = ButtonSize;
    BottomButton.style.width = ButtonSize;
    BottomButton.style.fontSize = FontSize;
    BottomButton.style.position = 'fixed';
    BottomButton.style.left = '50%';
    BottomButton.style.top = 'calc(100% - 40px)';
    BottomButton.style.transform = 'translateY(-50%)';
    BottomButton.style.opacity = ButtonsOpacityDefault;
    BottomButton.style.background = 'transparent';
    BottomButton.style.border = 'none';
    BottomButton.style.outline = 'none';
    BottomButton.style.zIndex = '9999';
    BottomButton.id="BottomButton";

    // Hide the button if in an iframe
    if (isInIframe) {
        BottomButton.style.display = 'none';
    }

    document.body.appendChild(BottomButton);

//********************************************************************************************************************
//***                                     Bottom button - Functionality ⬆️⚙️                                       ***
//********************************************************************************************************************

    // Function to scroll to the top of the page
    function scrollToTop2() {
        window.scrollTo(0, 0);
    }

    // Add event listener to scroll when button is clicked
    BottomButton.addEventListener('click', scrollToTop2);

    // Show BottomButton when mouse cursor is over it
    BottomButton.addEventListener('mouseenter', function() {
        BottomButton.style.opacity = ButtonsOpacityMouseOver;
    });

    // Hide BottomButton when mouse cursor leaves it
    BottomButton.addEventListener('mouseleave', function() {
        BottomButton.style.opacity = ButtonsOpacityDefault;
    });

//********************************************************************************************************************
//***                             Load bottom button options - button visibility 🔄                                ***
//********************************************************************************************************************

    GM.getValue("BottomButtonOption", "").then(function(value) {
		// Check if the script is running in an iframe
		if (window.self !== window.top) {
			// Hide the buttons in iframes
            BottomButton.style.display = 'none';
		} else {
			// Retrieve the value of SideButtonsOption using GM.getValue (DropDown2)
			GM.getValue("BottomButtonOption", "").then(function(value) {
				if (value === '0'|| value === '') {
					BottomButton.style.display = 'block';
				} else if (value === '1') {
                    BottomButton.style.display = 'none';
				}
			});
		}
    });

//********************************************************************************************************************
//***                         Load buttons options -buttons horizontal position 🔄                                 ***
//********************************************************************************************************************

    GM.getValue("BottomButtonSliderOption", "").then(function(value) {
        BottomButton.style.left = 'calc(' + value + '%)';
    });

//********************************************************************************************************************
//***                                               Options 🎛️                                                     ***
//********************************************************************************************************************

function handleRightClick(event) {
  event.preventDefault(); // Prevent the default right-click context menu

//*************************
//*** DropDownMenu 1  🎚️ ***
//*************************

// Create the dropdown menu
    var dropdown1 = document.createElement('select');
    dropdown1.id = 'dropdown1';
    dropdown1.style.fontSize = '15px';
    dropdown1.style.marginLeft = '22px';

// Define the options for the dropdown menu
    var options1 = [
        { value: 'option0', text: 'Right' },
        { value: 'option1', text: 'Left' },
        { value: 'option2', text: 'Disable' }
    ];

// Create the option elements and append them to the dropdown menu
options1.forEach(function(option) {
  var optionElement = document.createElement('option');
  optionElement.value = option.value;
  optionElement.text = option.text;
  dropdown1.appendChild(optionElement);
});

// Load/create dropdown1 options
 GM.getValue("SideButtonsOption", "").then(function(value) {
    if (value === '1') {
    dropdown1.selectedIndex = "1";
  } else if (value === '2') {
    dropdown1.selectedIndex = "2";
  } else {
    dropdown1.selectedIndex = "0";
  }
 });

// Add an event listener to save options change
dropdown1.addEventListener('change', function() {
  var selectedValue = dropdown1.value;
  if (selectedValue === 'option0') {

      GM.setValue("SideButtonsOption", "0");

      const TopSideButton = document.getElementById('TopSideButton');
      if (TopSideButton) {
          TopSideButton.style.display = 'block';
          TopSideButton.style.left = (document.documentElement.clientWidth - 81) + 'px';
      }
      const BottomSideButton = document.getElementById('BottomSideButton');
      if (BottomSideButton) {
          BottomSideButton.style.display = 'block';
          BottomSideButton.style.left = (document.documentElement.clientWidth - 81) + 'px';
      }

  } else if (selectedValue === 'option1') {

      GM.setValue("SideButtonsOption", "1");

      const TopSideButton = document.getElementById('TopSideButton');
      if (TopSideButton) {
          TopSideButton.style.display = 'block';
          TopSideButton.style.left = '15px';
      }
      const BottomSideButton = document.getElementById('BottomSideButton');
      if (BottomSideButton) {
          BottomSideButton.style.display = 'block';
          BottomSideButton.style.left = '15px';
      }

  } else if (selectedValue === 'option2') {

      //Check if bottom buttom invisible
      if (dropdown2.value === 'option5') {
          alert("All buttons can't be invisible! 🫠");
      } else if (dropdown2.value === 'option4') {
          GM.setValue("SideButtonsOption", "2");

          const TopSideButton = document.getElementById('TopSideButton');
          if (TopSideButton) {TopSideButton.style.display = 'none';}
          const BottomSideButton = document.getElementById('BottomSideButton');
          if (BottomSideButton) {BottomSideButton.style.display = 'none';}
      }
  }

});

//*************************
//*** DropDownMenu 2 🎚️ ***
//*************************

// Create the dropdown menu
    var dropdown2 = document.createElement('select');
    dropdown2.id = 'dropdown2';
    dropdown2.style.fontSize = '15px';
    dropdown2.style.marginLeft = '9px';

// Define the options for the dropdown menu
    var options2 = [
        { value: 'option4', text: 'Enable' },
        { value: 'option5', text: 'Disable' }
    ];

// Create the option elements and append them to the dropdown menu
options2.forEach(function(option) {
  var optionElement = document.createElement('option');
  optionElement.value = option.value;
  optionElement.text = option.text;
  dropdown2.appendChild(optionElement);
});

// Load/create dropdown2 options
 GM.getValue("BottomButtonOption", "").then(function(value) {
    if (value === '1') {
    dropdown2.selectedIndex = "1";
  } else {
    dropdown2.selectedIndex = "0";
  }
 });

// Add an event listener to save options change
dropdown2.addEventListener('change', function() {
  var selectedValue = dropdown2.value;
  if (selectedValue === 'option4') {

      GM.setValue("BottomButtonOption", "0");

      const BottomButton = document.getElementById('BottomButton');
      if (BottomButton) {
          BottomButton.style.display = 'block';
      }

  } else if (selectedValue === 'option5') {

      //Check if side buttoms invisible
      if (dropdown1.value === 'option2') {
          alert("All buttons can't be invisible! 🫠");
      } else if (dropdown1.value === 'option0' || dropdown1.value === 'option1') {
          GM.setValue("BottomButtonOption", "1");

          const BottomButton = document.getElementById('BottomButton');
          if (BottomButton) {BottomButton.style.display = 'none';}
      }
  }

});
//*************************
//***      Labels 🎚️    ***
//*************************

    // Create labels
    var OptionsTitleLabel = document.createElement('label');
    OptionsTitleLabel.innerHTML = 'Options';
    OptionsTitleLabel.style.color = 'white';
    OptionsTitleLabel.style.fontWeight = 'bold';
    OptionsTitleLabel.style.textDecoration = 'underline';
    OptionsTitleLabel.style.fontSize = '20px';

    var SideButtonsLabel = document.createElement('label');
    SideButtonsLabel.innerHTML = 'Side buttons: ';
    SideButtonsLabel.style.color = 'white';
    SideButtonsLabel.style.fontSize = '15px';

    var BottomButtonLabel = document.createElement('label');
    BottomButtonLabel.innerHTML = 'Bottom button: ';
    BottomButtonLabel.style.color = 'white';
    BottomButtonLabel.style.fontSize = '15px';

    var SideButtonsSliderLabel = document.createElement('label');
    SideButtonsSliderLabel.innerHTML = '⬆️⬇️ position: ';
    SideButtonsSliderLabel.style.color = 'white';
    SideButtonsSliderLabel.style.fontSize = '15px';

    var BottomButtonSliderLabel = document.createElement('label');
    BottomButtonSliderLabel.innerHTML = '⬆️ position: ';
    BottomButtonSliderLabel.style.color = 'white';
    BottomButtonSliderLabel.style.fontSize = '15px';

//*************************************
//*** Buttons Position Slider ⬆️⬇️🎚️ ***
//*************************************

    // Create the TopSideButtonSlider element
    var SideButtonsSlider = document.createElement('input');
    SideButtonsSlider.id = 'SideButtonsSlider';
    SideButtonsSlider.type = 'range';
    SideButtonsSlider.min = '4';
    SideButtonsSlider.max = '96';
    SideButtonsSlider.step = '1';
    SideButtonsSlider.value = '42';
    SideButtonsSlider.style.width = '100px';
    //TopSideButtonSlider.style.marginLeft = '52px';

    // Change blur sliders
    SideButtonsSlider.style.background = '#74e3ff';
    SideButtonsSlider.style.border = 'none';
    SideButtonsSlider.style.height = '5px';
    SideButtonsSlider.style.outline = 'none';
    SideButtonsSlider.style.appearance = 'none';
    SideButtonsSlider.style.webkitAppearance = 'none';
    SideButtonsSlider.style.mozAppearance = 'none';
    SideButtonsSlider.style.msAppearance = 'none';
    SideButtonsSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
    SideButtonsSlider.style.mozSliderThumb = '-moz-slider-thumb';
    SideButtonsSlider.style.msSliderThumb = '-ms-slider-thumb';
    SideButtonsSlider.style.sliderThumb = 'slider-thumb';

    GM.getValue("SideButtonsSliderOption", "").then(function(value) {
        SideButtonsSlider.value = value;
    });

//***********************************
//*** Button Position Slider ⬆️🎚️ ***
//***********************************

    // Create the TopButtonSlider element
    var BottomButtonSlider = document.createElement('input');
    BottomButtonSlider.id = 'BottomButtonSlider';
    BottomButtonSlider.type = 'range';
    BottomButtonSlider.min = '0';
    BottomButtonSlider.max = '95';
    BottomButtonSlider.step = '1';
    BottomButtonSlider.value = '50';
    BottomButtonSlider.style.width = '100px';
    BottomButtonSlider.style.marginLeft = '15px';

    // Change blur sliders
    BottomButtonSlider.style.background = '#74e3ff';
    BottomButtonSlider.style.border = 'none';
    BottomButtonSlider.style.height = '5px';
    BottomButtonSlider.style.outline = 'none';
    BottomButtonSlider.style.appearance = 'none';
    BottomButtonSlider.style.webkitAppearance = 'none';
    BottomButtonSlider.style.mozAppearance = 'none';
    BottomButtonSlider.style.msAppearance = 'none';
    BottomButtonSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
    BottomButtonSlider.style.mozSliderThumb = '-moz-slider-thumb';
    BottomButtonSlider.style.msSliderThumb = '-ms-slider-thumb';
    BottomButtonSlider.style.sliderThumb = 'slider-thumb';

    GM.getValue("BottomButtonSliderOption", "").then(function(value) {
        BottomButtonSlider.value = value;
    });

//*************************
//***    Donation 💳   ***
//*************************

    // Create labels
    var DonationButton = document.createElement('button');
    // Button size
    DonationButton.style.position = 'fixed';
    DonationButton.style.width = '180px';
    DonationButton.style.height = '25px';
    // Button text
    DonationButton.textContent = '💳Please support me!🤗';
    DonationButton.style.fontSize = '10px';
    // Button text style
    DonationButton.style.color = '#303236';
    DonationButton.style.textAlign = 'center';
    DonationButton.addEventListener('click', function() {GM_openInTab("https://gf.qytechs.cn/ru/scripts/482232-testertv-scrollbuttons");});
    DonationButton.style.backgroundColor = 'white';
    DonationButton.style.border = '1px solid grey';
    // Button position in panel
    DonationButton.style.position = 'absolute';
    DonationButton.style.left = '50%';
    DonationButton.style.transform = 'translate(-50%, -50%)';

//*************************
//***      Panel 🎚️     ***
//*************************

    // Create the panel
    var panel = document.createElement('div');
    panel.id = 'OptionPanel';
    panel.style.position = 'fixed';
    panel.style.top = '50%';
    panel.style.left = '50%';
    panel.style.transform = 'translate(-50%, -50%)';
    panel.style.backgroundColor = '#303236';
    panel.style.padding = '10px';
    panel.style.border = '1px solid grey';
    panel.style.zIndex = '9999';

    // Append the labels, dropdowns and donation button to the panel
    panel.appendChild(OptionsTitleLabel);
    panel.appendChild(document.createElement('br'));
    panel.appendChild(SideButtonsLabel);
    panel.appendChild(dropdown1);
    panel.appendChild(document.createElement('br'));
    panel.appendChild(BottomButtonLabel);
    panel.appendChild(dropdown2);
    panel.appendChild(document.createElement('br'));
    panel.appendChild(SideButtonsSliderLabel);
    panel.appendChild(SideButtonsSlider);
    panel.appendChild(document.createElement('br'));
    panel.appendChild(BottomButtonSliderLabel);
    panel.appendChild(BottomButtonSlider);
    panel.appendChild(document.createElement('br'));
    panel.appendChild(document.createElement('br'));
    panel.appendChild(DonationButton);
    panel.appendChild(document.createElement('br'));

    // Append the panel to the body
    document.body.appendChild(panel);

//*********************************************
//***    Slider Function Value Update   🔄🎚️ ***
//*********************************************

       // Add an event listener to update the effects when either slider value changes
       document.addEventListener('input', function(event) {
           // Check if the event target is one of the sliders
           const sliders = [SideButtonsSlider, BottomButtonSlider];

           if (sliders.includes(event.target)) {
               TopSideButton.style.top = 'calc(' + SideButtonsSlider.value + '%)';
               BottomSideButton.style.top = 'calc(' + (100 - SideButtonsSlider.value) + '%)';
               BottomButton.style.left = 'calc(' + BottomButtonSlider.value + '%)';

               //Save Sliders Position
               GM.setValue("SideButtonsSliderOption", SideButtonsSlider.value);
               GM.setValue("BottomButtonSliderOption", BottomButtonSlider.value);
           }
       });

}

//********************************************************************************************************************
//***                                             Listener event 👂                                                ***
//********************************************************************************************************************

//*************************
//***  Right click 🖱️   ***
//*************************
    TopSideButton.addEventListener('contextmenu', handleRightClick);
    BottomSideButton.addEventListener('contextmenu', handleRightClick);
    BottomButton.addEventListener('contextmenu', handleRightClick);

//*************************
//***   Left click 🖱️   ***
//*************************

// Add event listener to hide panel when clicking on the webpage
document.addEventListener('click', function(event) {
  // Check if the clicked element is the panel or its child elements
  var panel = document.getElementById('OptionPanel');
  var clickedElement = event.target;
  if (panel && !panel.contains(clickedElement)) {
    // Remove the panel from the DOM
    document.body.removeChild(panel);
  }
});

})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址