CODEWITHSUNDEEP
javascriptjqueryhtml
Quang Huy
Quang Huy

Reputation: 59

Scroll to top button won't work when implement to PHP

I am by no means a web developer so forgive me if I am missing something blindly obvious. I was trying to add the scroll back to top button from this awesome guy to my static HTML site and it work perfectly when I am splitting into 2 parts to put into my <head> 

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class='thetop'></div>

and the rest into my <footer> 

<div class='scrolltop'>
    <div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div>
</div>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 50 ) {
        $('.scrolltop:hidden').stop(true, true).fadeIn();
    } else {
        $('.scrolltop').stop(true, true).fadeOut();
    }
});
$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$(".thetop").offset().top},"1000");return false})})
</script>

So when I am trying to implement this into my PHP, I still split this into 2 parts. One for the header.php and one footer.php, just like the static site but both my local and live site does not display anything. I am also added button css to my css file.

My header.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class='thetop'></div>
<?php wp_head(); ?>
</head>

My footer.php

<div class='scrolltop'>
    <div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div>
</div>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 50 ) {
        $('.scrolltop:hidden').stop(true, true).fadeIn();
    } else {
        $('.scrolltop').stop(true, true).fadeOut();
    }
});
$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$(".thetop").offset().top},"1000");return false})})
</script>
<?php wp_footer(); ?>
</div>
</body>
</html>

Then I am thinking about adding both of them to my index.php and remove them from header.php and footer.php but it still does not working.

Any pointers would be appreciated.

Upvotes: 0

Views: 1426

Answers (2)

l.g.karolos
l.g.karolos

Reputation: 1142

Put the <div class='thetop'></div> after the <head> inside body

Upvotes: 1

bluehipy
bluehipy

Reputation: 2294

You should do such things after jQuery and the document are ready.

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
      $('.scrolltop:hidden').stop(true, true).fadeIn();
    } else {
      $('.scrolltop').stop(true, true).fadeOut();
    }
  });
  $(function() {
    $(".scroll").click(function() {
      $("html,body").animate({
        scrollTop: $(".thetop").offset().top
      }, "1000");
      return false
    })
  })
});

Upvotes: 0

Related Questions