使用javascript上下滾動

我試圖拼湊下面的代碼，但不起作用。當我向下滾動時，向上翻頁按鈕出現，當我點擊它時，滾動將成爲頁面頂部。當我滾動到頁面頂部時，頁面向下按鈕出現，當我點擊它時，頁面向上滾動時會執行相同的操作。使用javascript上下滾動

var amountScrolledTop = 200; 
 
    var amountScrolledDown = 50; 
 

 
    $(window).scroll(function() { 
 
\t  if ($(window).scrollTop() > amountScrolledTop) { 
 
\t \t  $('a.back-to-top').fadeIn('slow'); 
 
    \t } else { 
 
\t  \t $('a.back-to-top').fadeOut('slow'); 
 
\t  } 
 
    \t if ($(window).scrollTop() < amountScrolledDown) { 
 
\t  \t $('a.down1').fadeIn('slow'); 
 
    \t } else { 
 
\t  \t $('a.down1').fadeOut('slow'); 
 
    \t } 
 
    }); 
 

 
    $('a.back-to-top').click(function() { 
 
\t  $('html, body').animate({ 
 
\t \t  scrollTop: 0 
 
    \t }, 'slow'); 
 
\t  return false; 
 
    }); 
 

 
    $('a.down1').click(function() { 
 
\t  var objDiv = document.getElementById("mid"); 
 
\t  objDiv.scrollTop = objDiv.scrollHeight; 
 
    });

.down1{ 
 
\t  width: 60px; 
 
\t  height: 60px; 
 
\t  text-indent: -9999px; 
 
\t  position: fixed; 
 
\t  z-index: 999; 
 
\t  right: 60px; 
 
\t  top: 80px; 
 
\t  background: url("../img/simple_icons/downArrow.png") no-repeat center 43%; 
 
    } 
 
    .back-to-top{ 
 
\t  display: none; 
 
\t  width: 60px; 
 
\t  height: 60px; 
 
\t  text-indent: -9999px; 
 
\t  position: fixed; 
 
\t  z-index: 999; 
 
\t  right: 20px; 
 
\t  bottom: 20px; 
 
\t  background: url("../img/simple_icons/upArrow.png") no-repeat center 43%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
\t  <a href="#" class="down1" id="down1">Down to</a> 
 
     <a href="#" class="back-to-top" id="back-to-top">Back to Top</a> 
 
     . 
 
     . 
 
     . 
 
     <div class="mid"></div> 
 
</body>

向下翻頁按鈕始終滾動到頁面頂部。即使我刪除所有的JavaScript代碼。

來源

2016-11-17 Burak Kocaman

嘗試清除瀏覽器緩存。 – k97513

嘗試在淡出後設置顯示無... –

您正準確面對的問題是什麼？ –

我想這就是你要找的，我在代碼上加了一些註釋來描述我所做的修改。

var amountScrolledTop = 200; 
 
var amountScrolledDown = 50; 
 

 
$(window).scroll(function() { 
 

 
    if ($(window).scrollTop() > amountScrolledTop) { 
 
    $('a.back-to-top').fadeIn('slow'); 
 
    } else { 
 
    $('a.back-to-top').fadeOut('slow'); 
 
    } 
 

 
    if ($(window).scrollTop() < amountScrolledDown) { 
 
    $('a.down1').fadeIn('slow'); 
 
    } else { 
 
    $('a.down1').fadeOut('slow'); 
 
    } 
 
}); 
 

 
$('a.back-to-top').click(function() { 
 
    $('html, body').animate({ 
 
    scrollTop: 0 
 
    }, 'slow'); 
 
    return false; 
 
}); 
 

 
$('a.down1').click(function(e) { 
 
    
 
    //you have to prevent the default action of the link (the default going to the top because of href="#" even if there is no javascript) 
 
    e.preventDefault(); 
 
    
 
    //objDiv used to be "null" because it was defined by class not id in html 
 
    var objDiv = document.getElementById("mid"); 
 
    $('html, body').animate({ 
 
    scrollTop: objDiv.scrollHeight 
 
    }, 'slow'); 
 
});

.down1{ 
 
    width: 60px; 
 
    height: 60px; 
 
    position: fixed; 
 
    z-index: 999; 
 
    right: 60px; 
 
    top: 80px; 
 
    background: url("../img/simple_icons/downArrow.png") no-repeat center 43%; 
 
} 
 
.back-to-top{ 
 
    display: none; 
 
    width: 60px; 
 
    height: 60px; 
 
    position: fixed; 
 
    z-index: 999; 
 
    right: 20px; 
 
    bottom: 20px; 
 
    background: url("../img/simple_icons/upArrow.png") no-repeat center 43%; 
 
} 
 
#mid { 
 
    height: 2000px; 
 
    background-color: #bbb; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="down1" id="down1">Down to</a> 
 
<a href="#" class="back-to-top" id="back-to-top">Back to Top</a> 
 
<!-- it was class="mid" --> 
 
<div id="mid"></div>

來源

2016-11-18 16:32:46

使用javascript上下滾動

回答

相關問題