Creating a Go To X Button With JavaScript
Started by Blue

Posts:33
Tokens: 232
Reputation: 4
Member
Posts:33
Joined:Jul 2017
Reputation: 4
Tokens: 232
07-02-2017, 11:20 PM
First, let's create our button. 

Code:
<button onclick="going("up")" id="my-special-little-button" title="going up?">Top</button>

Now let's write the JavaScript.

Code:
window.onscroll = function() {getPosition('up');};

function getPosition(direction) {
   if ((direction==='up') && (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20))
   {
       document.getElementById("my-special-little-button").style.display = "block";
   }
 else if ((direction==='down') && (document.body.scrollBottom > 20 || document.documentElement.scrollBottom > 20))
   {
       document.getElementById("my-special-little-button").style.display = "block";
   }
 else if ((direction==='left') && (document.body.scrollLeft > 20 || document.documentElement.scrollLeft > 20))
   {
       document.getElementById("my-special-little-button").style.display = "block";
   }
 else if ((direction==='right') && (document.body.scrollRight > 20 || document.documentElement.scrollRight > 20))
   {
       document.getElementById("my-special-little-button").style.display = "block";
   }
 else
   {
       document.getElementById("my-special-little-button").style.display = "none";
   }
}

function going(direction) {
 if(direction==='up')
   {
   document.body.scrollTop = 0;
   document.documentElement.scrollTop = 0;

   }
 else if (direction==='down')
   {
   document.body.scrollBottom = 0;
   document.documentElement.scrollBottom = 0;

   }
   else if (direction==='left')
   {
   document.body.scrollLeft = 0;
   document.documentElement.scrollLeft = 0;

   }
   else if (direction==='right')
   {
   document.body.scrollRight = 0;
   document.documentElement.scrollRight = 0;

   }
}


This is very very overkill JavaScript, but it will allow you to utilize the same functions on different pages and different situations instead of rewriting the javascript for each case.  

Let's make it pretty with some CSS Smile

Code:
#my-special-little-button {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 99;
   border: none;
   outline: none;
   background-color: #fff;
   color: #000;
   transition:.2s;
}

#my-special-little-button:hover {
   background-color: #333;
   color:#fff;
   transition:.2s;
}
"Don't try to be what you're not. If you're nervous, be nervous. If you're shy, be shy. It's cute."

- Adriana Lima

Posts:115
Tokens: 197
Reputation: 5
Wot to put her
Emerald
Posts:115
Joined:Apr 2017
Reputation: 5
Tokens: 197
07-03-2017, 12:22 AM (This post was last modified: 07-03-2017, 12:23 AM by Sweets.)
The JavaScript is overly complicated for no apparent reason, but it works I guess.

Also the onclick attribute won't work because the quotes aren't escaped.

Should be one of either

Code:
onclick="going('up')"

or

Code:
onclick="going(\"up\")"
pls rember that wen u feel scare or frigten never forget ttimes wen u feeled happy wen day is dark always rember happy day

Posts:33
Tokens: 232
Reputation: 4
Member
Posts:33
Joined:Jul 2017
Reputation: 4
Tokens: 232
07-03-2017, 12:44 AM
(07-03-2017, 12:22 AM)Sweets Wrote: The JavaScript is overly complicated for no apparent reason, but it works I guess.

Also the onclick attribute won't work because the quotes aren't escaped.

Should be one of either

Code:
onclick="going('up')"

or

Code:
onclick="going(\"up\")"

Like I said that javascript is really overkill but it's still fine, it really depends on how you are going to use the buttons, tho there's always better ways like anchors and such.
"Don't try to be what you're not. If you're nervous, be nervous. If you're shy, be shy. It's cute."

- Adriana Lima

Posts:115
Tokens: 197
Reputation: 5
Wot to put her
Emerald
Posts:115
Joined:Apr 2017
Reputation: 5
Tokens: 197
07-03-2017, 02:19 AM
(07-03-2017, 12:44 AM)Blue Wrote:
(07-03-2017, 12:22 AM)Sweets Wrote: The JavaScript is overly complicated for no apparent reason, but it works I guess.

Also the onclick attribute won't work because the quotes aren't escaped.

Should be one of either

Code:
onclick="going('up')"

or

Code:
onclick="going(\"up\")"

Like I said that javascript is really overkill but it's still fine, it really depends on how you are going to use the buttons, tho there's always better ways like anchors and such.

No, it's not overkill, it's overly complicated. There's a difference. Also guess anyone who follows the tutorial alone and doesn't read replies just gets a broken button, because you still didn't fix the main issue.
pls rember that wen u feel scare or frigten never forget ttimes wen u feeled happy wen day is dark always rember happy day





Users browsing this thread: 1 Guest(s)