2015-04-13 3 views
1

Я скопировать и вставить код для прокрутки вверх в моей веб-странице со следующего сайта:прокрутки вверх Javascript код не работает

http://jsfiddle.net/neeklamy/RpPEe/

Даже если прокрутки верхней кнопки не видны, мой исходный код веб-страницы выглядит следующим образом:

<!DOCTYPE html> 
<html> 
<head> 
<title>Rough</title> 
<style type ="text/css"> 
.scrollup { 
width: 40px; 
height: 40px; 
position: fixed; 
bottom: 50px; 
right: 100px; 
display: none; 
text-indent: -9999px; 
background: url('icon_top.png') no-repeat; 
background-color: #000; 
} 
</style> 
<script> 
$(document).ready(function() { 

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100) { 
     $('.scrollup').fadeIn(); 
    } else { 
     $('.scrollup').fadeOut(); 
    } 
}); 

$('.scrollup').click(function() { 
    $("html, body").animate({ 
     scrollTop: 0 
    }, 600); 
    return false; 
}); 

}); 
</script> 
</head> 
<body> 
<h1>Top of the page</h1> 

<article style="height: 1000px"> 
<p style="margin-bottom: 600px">Scroll down the page&hellip;</p> 
<p>Then click the box.</p> 
<a href="#" class="scrollup">Scroll</a> 
</article> 
</body> 
</html> 
+0

работает как шарм для меня, какой браузер вы в? – iamwhitebox

+0

@whitebox google chrome –

+0

он отлично работает для меня в Chrome, Firefox и IE 11 – Sushil

ответ

5

У вас не хватает JQuery, добавьте тег сценария следующим образом:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script> 

или добавить его на месте путем загрузки библиотеки и добавить его в файл проекта.

Рабочая JSFiddle: http://jsfiddle.net/nayish/uLt7guvg/2/

+0

исправлено, отсутствует 'background-size: cover;' – Nayish

0

Вам не хватает файла 'icon_top.png'. У вас должно быть это изображение в той же папке, что и файл .html.

+0

да, у меня есть это изображение в той же папке –

Смежные вопросы