Creating a Go To X Button With JavaScript
Started by BlueBookmark

Posts:33
Tokens: 77
Reputation:
Member
Posts:33
Joined:Jul 2017
Reputation: 4
Likes0
77
Tokens:
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:314
Tokens: 302
Reputation:
Tor Exit Node
Posts:314
Joined:Apr 2017
Reputation: 10
Likes33
302
Tokens:
EliteTrophyDefenderOne Week OnlineHalloween Event 2017Selfie
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: 77
Reputation:
Member
Posts:33
Joined:Jul 2017
Reputation: 4
Likes0
77
Tokens:
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:314
Tokens: 302
Reputation:
Tor Exit Node
Posts:314
Joined:Apr 2017
Reputation: 10
Likes33
302
Tokens:
EliteTrophyDefenderOne Week OnlineHalloween Event 2017Selfie
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)