Question

我尝试将以下代码组合在一起但不起作用。当我向下滚动时，会出现向上翻页按钮，当我单击它时，滚动将成为页面顶部。当我将滚动设置到页面顶部时，会出现页面向下按钮，当我单击它时，它会执行与向上翻页相同的操作。

    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() {
	    var objDiv = document.getElementById("mid");
	    objDiv.scrollTop = objDiv.scrollHeight;
    });

.down1{
	    width: 60px;
	    height: 60px;
	    text-indent: -9999px;
	    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;
	    text-indent: -9999px;
	    position: fixed;
	    z-index: 999;
	    right: 20px;
	    bottom: 20px;
	    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>
	    <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代码。

Answer 1

我认为这正是您所寻找的，我对代码进行了一些评论，以描述我所做的修改。

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>

使用javascript

1 个答案: