Support » Plugin: WPFront Scroll Top » Can I apply these settings to a custom site?

  • My main WordPress website is using your your plugin to create a scroll to top icon.

    But I have two addition sites that are not WordPress orientated. They are actually built with HelpNDoc and I had added some custom php to display a scroll to top icon.

    Here is one of the sites:

    At the moment I am inserting this CSS in my help topics:

      <!-- For "Scroll to top" -->
      <link id="msa-font-awesome-css" href="//cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css?ver=4.7.0" media="all" rel="stylesheet" type="text/css" />
      <script defer src="js/fontawesome.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <style type="text/css">
      #myBtn {
    	position: fixed;
    	right: 40px;
    	bottom: 65px;
    	display: none;
    	border: none;
    	outline: none;
    	background: #d35438 !important;
    	-moz-box-shadow: inset 0 30px 30px -30px #7F7F7F, inset 0 -30px 30px -30px #7F7F7F;
    	-webkit-box-shadow: inset 0 30px 30px -30px #7F7F7F, inset 0 -30px 30px -30px #7F7F7F;
    	box-shadow: inset 0 30px 30px -30px #606060, inset 0 -30px 30px -30px #606060;
    	width: 45px;
    	height: 45px;
    	text-align: center;
    	color: #E7D8A3 !important;
    	padding: 8px;
    	font-size: 20px;
    	-webkit-transition: all 0.1s linear 0s;
    	-moz-transition: all 0.1s linear 0s;
    	-o-transition: all 0.1s linear 0s;
    	transition: all 0.1s linear 0s;
    	font-family: 'Tahoma', sans-serif;
    	z-index: 99999999;
      }
      #myBtn:hover {
    	opacity: 0.8;
    	-moz-box-shadow: inset 0 0 20px #000000;
    	-webkit-box-shadow: inset 0 0 20px #000000;
    	box-shadow: inset 0 0 20px #000000;
      }  

    And, each help topic has this at the bottom before the </body> tag:

      <!-- Code for scrolling back to the top of the article -->
      <script type="text/javascript">
        <!-- When the user scrolls down 20px from the top of the document, show the button -->
        window.onscroll = function() {scrollFunction()};
    
        function scrollFunction() {
          if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
            document.getElementById("myBtn").style.display = "block";
          } else {
            document.getElementById("myBtn").style.display = "none";
          }
        }
      
        $('#myBtn').on('click', function (e) {
          e.preventDefault();
          $('html,body').animate({scrollTop: 0}, 1000);
        });
      </script>

    Is it possible to change this CSS / Code so that my help site shows exactly the same scroll to top icon as done your plugin on the main site?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.