HTML and JQuery slide up correct placement

JavaScript
1 
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<header></header>
		<main></main>
		<footer></footer>
		
	</body>
</html>

A normal HTML has this kind of structure. Now I want to put a JQuery Scroll top, which has a code like this.

// ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#scrolltop').fadeIn(200);    // Fade in the arrow
    } else {
        $('#scrolltop').fadeOut(200);   // Else fade out the arrow
    }
});
$('#scrolltop').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});

the HTML that will be connected to the above is:

<a href="javascript:" id="scrolltop"><i class="icon-chevron-up"></i></a>

I don’t want to put it either in the header or in the main and nor in the footer because I do not want this to be initially visible.

where should I put this so that it should appear as if it is floating over the whole HTML body?

2

I tried something with the position fixed →

but that svg arrow is not appearing.

3

Hi there codeispoetry,

no need for a sledgehammer vanilla flavour will suffice. :winky:

This example also works with javascript disabled…

<!DOCTYPE HTML>
<html lang="en">
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self';script-src 'self'; style-src 'self'">-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 100%/162% verdana, arial, helvetica, sans-serif;
 }

#container {
    max-width: 50em;
    padding: 2em;
    margin: 1em auto;
    border: 0.062em solid #999;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em #999;
 }

.classscrolltop {
    position: fixed;
    bottom: 1.25em;
    right: 1.25em;
    width: 3.125em;
    height: 3.125em;
    text-decoration: none;
    transition: 1s ease-in-out;
 }

.nojs{
    transition: none;
 }

.displayout {
    right: -3.25em;
    z-index: -999;
    opacity: 0;
 }

</style>

</head>
<body> 

<div id="container">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Curabitur sit amet sem sed libero bibendum tempus faucibus       
  quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
  nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
  interdum justo ac justo vehicula consequat. Curabitur et 
  volutpat nibh. Phasellus rutrum lacus at dolor placerat 
  feugiat. Morbi porta, sapien nec molestie molestie, odio 
  magna vestibulum lorem, vitae feugiat est leo sit amet 
  nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
  magna sed, pretium commodo odio. Sed porttitor augue velit, 
  quis placerat diam sodales ac. Curabitur vitae porta ex. 
  Praesent rutrum ex fringilla tellus tincidunt interdum. 
  Proin molestie lectus consectetur purus aliquam porttitor. 
  Fusce ac nisi ac magna scelerisque finibus a vitae sem.
 </p><p>
  Donec vehicula diam non leo efficitur, id euismod odio 
  tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
  et libero non diam tempor sagittis. Quisque vel egestas 
  ipsum. Integer sed elit eu orci blandit commodo in in erat. 
  Donec blandit, mi at gravida varius, nulla tellus vulputate 
  ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
  penatibus et magnis dis parturient montes, nascetur ridiculus 
  mus. Curabitur tristique varius ullamcorper.
 </p><p>
  Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
  mattis leo at ex vehicula, non vestibulum ligula aliquam. 
  Maecenas non nibh sollicitudin, porttitor odio in, elementum 
  arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac 
  rutrum odio bibendum volutpat. Phasellus ac sem consequat 
  lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
  augue. Curabitur ullamcorper sit amet libero in ullamcorper. 
  Donec sed laoreet quam. Phasellus malesuada libero felis, non 
  elementum ex tincidunt eget. Quisque cursus arcu vel diam 
  consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
 </p><p>
  In sapien massa, feugiat ut magna eu, hendrerit porttitor 
  justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam 
  facilisis, et molestie dolor blandit. Pellentesque non lectus 
  odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. 
  Duis congue dignissim ante ut consequat. Sed nec sagittis 
  neque, quis vehicula urna. Fusce laoreet interdum ligula vel 
  finibus. Nunc odio purus, dapibus sit amet orci eget, congue 
  eleifend erat. Quisque porttitor imperdiet ullamcorper. 
  Aenean non orci nec magna tempor porta at id ipsum.
 </p><p>
  Cras euismod euismod nibh, nec hendrerit ante efficitur id. 
  Donec sit amet interdum mauris. Maecenas pellentesque, sem a 
  commodo tincidunt, quam ex viverra nibh, non consectetur odio 
  quam et velit. Nulla eu risus quis magna suscipit malesuada 
  vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id 
  elementum nisi interdum. Integer sem quam, tincidunt nec quam 
  ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, 
  eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam 
  nec ullamcorper enim. Donec sit amet commodo ante, vitae 
  consectetur sem. Proin ut luctus dolor. Integer lectus massa, 
  maximus nec urna non, ullamcorper hendrerit mi. 
 </p>
</div>

 <a href="#top" class="classscrolltop nojs">
    <svg x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
       <g>
        <polygon style="fill:#4FBA6F;" points="256,0 114.759,194.207 211.862,194.207 211.862,300.138 300.138,300.138 300.138,194.207
                397.241,194.207"/>
        <path style="fill:#4FBA6F;" d="M282.483,335.448h-52.966c-9.71,0-17.655,7.945-17.655,17.655s7.945,17.655,17.655,17.655h52.966
                c9.71,0,17.655-7.945,17.655-17.655S292.193,335.448,282.483,335.448"/>
        <path style="fill:#4FBA6F;" d="M282.483,406.069h-52.966c-9.71,0-17.655,7.945-17.655,17.655c0,9.71,7.945,17.655,17.655,17.655
                h52.966c9.71,0,17.655-7.945,17.655-17.655C300.138,414.014,292.193,406.069,282.483,406.069"/>
        <path style="fill:#4FBA6F;" d="M282.483,476.69h-52.966c-9.71,0-17.655,7.945-17.655,17.655c0,9.71,7.945,17.655,17.655,17.655
                h52.966c9.71,0,17.655-7.945,17.655-17.655C300.138,484.634,292.193,476.69,282.483,476.69"/>
       </g>
    </svg>
 </a>

<script>
(function(w,d) {
   'use strict';
   var el = d.getElementsByClassName( 'classscrolltop' )[0].classList;
       el.add( 'displayout');

   w.onscroll = function(){
           el.remove( 'nojs');
      if (  w.pageYOffset >= 50 ){
           el.remove( 'displayout');
        }
     else {
           el.add( 'displayout');
        }
 }
}(window, document));
</script>

</body>
</html>

coothead

2 Likes
4

wow. I liked that animation very much. coming from right-handside with slow animation. Nice!

Question: Can we animate so that scroll goes upward slowly?

5

Hi there codeispoetry,

like this, perhaps…

<!DOCTYPE HTML>
<html lang="en">
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self';script-src 'self'; style-src 'self'">-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 100%/162% verdana, arial, helvetica, sans-serif;
 }

#container {
    max-width: 50em;
    padding: 2em;
    margin: 1em auto;
    border: 0.062em solid #999;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em #999;
 }

.classscrolltop {
    position: fixed;
    bottom: 1.25em;
    right: 1.25em;
    width: 3.125em;
    height: 3.125em;
    text-decoration: none;
    transition: 1s ease-in-out;
 }

.nojs{
    transition: none;
 }

.displayout {
    right: -3.25em;
    z-index: -999;
    opacity: 0;
 }

</style>

</head>
<body> 

<div id="container">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Curabitur sit amet sem sed libero bibendum tempus faucibus       
  quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
  nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
  interdum justo ac justo vehicula consequat. Curabitur et 
  volutpat nibh. Phasellus rutrum lacus at dolor placerat 
  feugiat. Morbi porta, sapien nec molestie molestie, odio 
  magna vestibulum lorem, vitae feugiat est leo sit amet 
  nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
  magna sed, pretium commodo odio. Sed porttitor augue velit, 
  quis placerat diam sodales ac. Curabitur vitae porta ex. 
  Praesent rutrum ex fringilla tellus tincidunt interdum. 
  Proin molestie lectus consectetur purus aliquam porttitor. 
  Fusce ac nisi ac magna scelerisque finibus a vitae sem.
 </p><p>
  Donec vehicula diam non leo efficitur, id euismod odio 
  tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
  et libero non diam tempor sagittis. Quisque vel egestas 
  ipsum. Integer sed elit eu orci blandit commodo in in erat. 
  Donec blandit, mi at gravida varius, nulla tellus vulputate 
  ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
  penatibus et magnis dis parturient montes, nascetur ridiculus 
  mus. Curabitur tristique varius ullamcorper.
 </p><p>
  Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
  mattis leo at ex vehicula, non vestibulum ligula aliquam. 
  Maecenas non nibh sollicitudin, porttitor odio in, elementum 
  arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac 
  rutrum odio bibendum volutpat. Phasellus ac sem consequat 
  lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
  augue. Curabitur ullamcorper sit amet libero in ullamcorper. 
  Donec sed laoreet quam. Phasellus malesuada libero felis, non 
  elementum ex tincidunt eget. Quisque cursus arcu vel diam 
  consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
 </p><p>
  In sapien massa, feugiat ut magna eu, hendrerit porttitor 
  justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam 
  facilisis, et molestie dolor blandit. Pellentesque non lectus 
  odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. 
  Duis congue dignissim ante ut consequat. Sed nec sagittis 
  neque, quis vehicula urna. Fusce laoreet interdum ligula vel 
  finibus. Nunc odio purus, dapibus sit amet orci eget, congue 
  eleifend erat. Quisque porttitor imperdiet ullamcorper. 
  Aenean non orci nec magna tempor porta at id ipsum.
 </p><p>
  Cras euismod euismod nibh, nec hendrerit ante efficitur id. 
  Donec sit amet interdum mauris. Maecenas pellentesque, sem a 
  commodo tincidunt, quam ex viverra nibh, non consectetur odio 
  quam et velit. Nulla eu risus quis magna suscipit malesuada 
  vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id 
  elementum nisi interdum. Integer sem quam, tincidunt nec quam 
  ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, 
  eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam 
  nec ullamcorper enim. Donec sit amet commodo ante, vitae 
  consectetur sem. Proin ut luctus dolor. Integer lectus massa, 
  maximus nec urna non, ullamcorper hendrerit mi. 
 </p>
</div>

 <a href="#top" class="classscrolltop nojs">
    <svg x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
       <g>
        <polygon style="fill:#4FBA6F;" points="256,0 114.759,194.207 211.862,194.207 211.862,300.138 300.138,300.138 300.138,194.207
                397.241,194.207"/>
        <path style="fill:#4FBA6F;" d="M282.483,335.448h-52.966c-9.71,0-17.655,7.945-17.655,17.655s7.945,17.655,17.655,17.655h52.966
                c9.71,0,17.655-7.945,17.655-17.655S292.193,335.448,282.483,335.448"/>
        <path style="fill:#4FBA6F;" d="M282.483,406.069h-52.966c-9.71,0-17.655,7.945-17.655,17.655c0,9.71,7.945,17.655,17.655,17.655
                h52.966c9.71,0,17.655-7.945,17.655-17.655C300.138,414.014,292.193,406.069,282.483,406.069"/>
        <path style="fill:#4FBA6F;" d="M282.483,476.69h-52.966c-9.71,0-17.655,7.945-17.655,17.655c0,9.71,7.945,17.655,17.655,17.655
                h52.966c9.71,0,17.655-7.945,17.655-17.655C300.138,484.634,292.193,476.69,282.483,476.69"/>
       </g>
    </svg>
 </a>

<script>
(function( w,d ) {
   'use strict';

   var y = 5;     /* adjust to taste */
   var time = 10; /* adjust to taste */
   var si;

   var obj = d.getElementsByClassName( 'classscrolltop' )[0];
   var el = obj.classList;
       el.add( 'displayout');

   w.onscroll = function(){
           el.remove( 'nojs');
      if (  w.pageYOffset >= 50 ){
           el.remove( 'displayout');
        }
     else {
          el.add( 'displayout');
        }
     }
   obj.addEventListener( 'click', 
      function(event) { 
         event.preventDefault();

         si = setInterval( 
            function(){
               if ( w.pageYOffset-y <= 0 ) {
                    clearInterval( si ); 
                    return;
                  }
               else {
                    scrollTo( 0, w.pageYOffset-y );
                  }    
                }, time );
    }, false );
 }( window, document ));
</script>

</body>
</html>

coothead

3 Likes
6

Hi there,

which portion is governing the speed? I think this one:

var y = 5;     /* adjust to taste */
   var time = 10; /* adjust to taste */

I manipulated, but I couldn’t see the result.

Also, with what portion of the CSS animation are you managing that arrow coming from right to left and then becoming visible?

7

Hi there codeispoetry,

I would suggest that you experiment with both . :winky:

the “y” value is pixels and the “time” value is milliseconds.

Are the present settings to slow or too fast for your needs?

.displayout {
    right: -3.25em;
    z-index: -999;
    opacity: 0;
 }

to…

.classscrolltop {
    ...
    ...
    right: 1.25em;
    ....
    ....
 }

coothead

1 Like
8

Too slow sir.

9

If you change this…

var y = 5;

…to this…

var y = 10;

…it would move twice as fast. :sunglasses:

coothead

2 Likes
10

Got it. I was decreasing it making it less than 5. Thanks!

11

Hi there codeispoetry,

the “z-index: -999;” is not required here…

.displayout {
    right: -3.25em;
    z-index: -999;
    opacity: 0;
 }

I made amendments whilst coding and forgot to remove it. :wonky:

coothead

2 Likes
12

Generally, wordpress core loads JQuery by default. keeping that in mind would it be code optimal to use JQuery based solution or Vanilla JS?

13

I will let “deathshadow” an ex-member answer that in his inimitable style…

HTML, CSS and JavaScript Frameworks - Incompetent Nonsense

WARNING This article may contain strong language,
hate-mongering and outright name-calling

coothead

1 Like
14

I agree with him. You must have noticed that I never posted a single post here related to bootstrap because that is so complex and offer so much complexity while making customizations.

16

If you are working on something that is already loading, and is reliant on JQuery, it probably doesn’t hurt any more to use JQuery scripting.
However if developing something yourself, you then have the choice of whether to load or omit such things as JQuery.

I have very little to do with WP, so don’t know the facts on this, perhaps a WP expert can clarify
But does the actual WP core load JQuery, or is it the individual themes, made by the theme makers who decide whether to use it or not?
I mention this because you have previously mentioned your intent to make WP themes, so JQuey may or may not be optional to you.

1 Like
17

JQuery is included in the WP core in wp-include folder.

Another reference →

Citation from the above-mentioned link →

However, WordPress itself also uses jQuery.

Additionally,

One doesn’t need to be an expert to know this; This is a very basic knowledge about WP.

There is also a method to de-register it:

But it is not advisable and good theme makers never do that.

You are right @SamA74

18

In words of Obi Wan – “Only siths deal in absolutes”.

1 Like
19

@coothead
At some point in your life and career, you must have also started how much time did it take than to become comfortable with Javascript.

I assume when you had started there was no so much help available such as videos, forum, and strong social communities online.

Moving forward for the sake of learning can you also help me figure out what was wrong in my JQuery version of scroll up that I initially posted at the beginning of this thread.

20

That was working fine once you include the jquery library :slight_smile:

2 Likes
21

Oh yeah. I thought that JQuery is included by default in the codepen. Yes, it works 100% now.

1 Like