使用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上下滚动

回答

相关问题