滾動到頂部按鈕在實現到PHP時不起作用

Question

我絕不是一個Web開發人員，如果我遺漏了一些顯而易見的內容，請原諒我。 我試圖將這個很棒的人的“滾動回到頂部”按鈕添加到我的靜態HTML網站中，當我分成兩部分放入<head>時，它可以完美地工作

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

其余的放入我的<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>

因此，當我嘗試將其實現到PHP中時，仍將其分為兩部分。 就像靜態站點一樣，一個用於header.php，一個用於footer.php，但是本地站點和活動站點均不顯示任何內容。 我還將按鈕css添加到我的css文件中。

我的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>

我的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>

然后我正在考慮將它們都添加到我的index.php中，並將它們從header.php和footer.php中刪除，但仍然無法正常工作。

任何指針將不勝感激。

Answer 1

將<div class='thetop'></div> <head>放在body <head>之后

Answer 2

在jQuery和文檔准備好之后，您應該執行此類操作。

 $(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 }) }) });

滾動到頂部按鈕在實現到PHP時不起作用

問題描述

2 個解決方案

解決方案1
1 2017-08-22 10:27:30

解決方案2
0 2017-08-22 10:23:33

滾動到頂部按鈕在實現到PHP時不起作用

問題描述

2 個解決方案

解決方案1 1 2017-08-22 10:27:30

解決方案2 0 2017-08-22 10:23:33

解決方案1
1 2017-08-22 10:27:30

解決方案2
0 2017-08-22 10:23:33