Question

＆＃13;

function scrollWin() {
    setInterval(function(){ for(var i = 0; i < 1250; i++){
    window.scrollTo(0, i);} }, 3);
  
  }

＆＃13;

li {
  float: left;
  list-style: none;
  margin: 10px;
}
.reset {
  clear: both;
}
div {
  width: 500px;
  height: 600px;
  background-color: blue;
  margin: 20px;
}

＆＃13;

<ul>
  <li><a href="#"></a>Home</li>
  <li><button onclick="scrollWin()"></a>about</button>
  
  <li><a href="#"></a>profile</li>
  <li><a href="#"></a>contact</li>
</ul>
<div class="reset"></div>
<section>
  <div id="home1"></div>
  <div id="about1">About</div>
  <div id="profile1"></div>
  <div id="contact"></div>
</section>

＆＃13;

所以即时尝试使for循环将每个循环的高度增加1，这将使屏幕下降一个高度。在很短的时间内使用时间间隔，我相信这会使页面顺利向下滚动。

Answer 1

我正在写一个示例代码在php中，如果循环运行第二次滚动条，就像你希望的问题一样。所以首先定义一个变量，然后在循环中增加它，如下所示：

<?php
$i=1;
for(condition;condition;condition){
     //your code here
     $i++;
}

if($i<1){
 echo '<script>
         $(".yourdivclass").css("overflow","scroll");
       </script>';
}
?>

Answer 2

这一点JavaScript应该能够很好地满足您的要求。我有一个小提琴，我已经设置为一个用法示例。如果您有任何疑问，请查看并告诉我。

https://jsfiddle.net/6gp7srfr/1/

function smoothScroll(x, y) {
    var b = document.body;
    var xIncrement = 1;
    var yIncrement = 1;
    var scrollY = function () {
        yIncrement += 1;
        window.scroll(b.scrollLeft, b.scrollTop + yIncrement);
        if (b.scrollTop < y) {
            if (requestAnimationFrame) {
                requestAnimationFrame(scrollY);
            } else {
                setTimeout(scrollY, 15);
            }
        }
    };
    var scrollX = function () {
        xIncrement += 1;
        window.scroll(b.scrollLeft + xIncrement, b.scrollTop);
        if (b.scrollLeft < x) {
            if (requestAnimationFrame) {
                requestAnimationFrame(scrollX);
            } else {
                setTimeout(scrollX, 15);
            }
        }
    };
    if (y > 0) {
        scrollY();
    }
    if (x > 0) {
        scrollX();
    }
}

如何使用javascript顺利向下滚动页面

2 个答案: