Всем привет, есть такая вот кнопка прокрутки, и код к ней, но только мне нужно, чтобы она отображалась когда я долистаю до футера, а приходится скролить ещё ниже, чтобы она появилась, но эту область мне не нужно уже задевать. Как исправить эту ситуацию?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#container div a").one('click', function() {
$(this).parent().animate({
width: '+=100px'
}, 500);
$(this).prev().html(parseInt($(this).prev().html()) + 1);
return false;
});
});
</script>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="top_header">
<div class="logo">
<a href="index.html">
<img src="img/logo.png" alt="">
</a>
</div>
<nav class="menu">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
<li id="current"><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<div class="title">
Blog
</div>
</header>
<main class="content">
<div class="portfolio_box">
<div class="portfolio_items">
<img src="img/work_1.jpg" alt="">
</div>
<div class="portfolio_items">
<img src="img/work_2.jpg" alt="">
</div>
<div class="portfolio_items">
<img src="img/work_3.jpg" alt="">
</div>
<div class="portfolio_items">
<img src="img/work_4.jpg" alt="">
</div>
<div class="portfolio_items">
<img src="img/work_5.jpg" alt="">
</div>
<div class="portfolio_items">
<img src="img/work_6.jpg" alt="">
</div>
<div class="portfolio_items">
<img src="img/work_7.jpg" alt="">
</div> <div id="container">
<span id="question">What is your favorite image?</span>
<div><span>0</span><a href="">Click</a>1</div>
<div><span>0</span><a href="">Click</a>2</div>
<div><span>0</span><a href="">Click</a>3</div>
<div><span>0</span><a href="">Click</a>4</div>
<div><span>0</span><a href="">Click</a>5</div>
<div><span>0</span><a href="">Click</a>6</div>
</div>
</main>
<div class="box_footer"></div>
</div>
</div>
<footer class="footer">
<div class="soc_icons">
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Dribble</a></li>
</ul>
</div>
<p style="margin-left: 80px;" id="back-top"><a href="#top"><span></span>Наверх</a></p>
<div class="copi">
© Design & Code 2013. All rights reserved
</div>
</footer>
</body>
</html>
$(document).ready(function(){
$(function (){
$("#back-top").hide();
$(window).scroll(function (){
if ($(this).scrollTop() > 700){
$("#back-top").fadeIn();
} else{
$("#back-top").fadeOut();
}
});
$("#back-top a").click(function (){
$("body,html").animate({
scrollTop:0
}, 800);
return false;
});
});
});
