【问题标题】：How to make Auto scroll page in Jquery and bootstrap如何在 Jquery 和 bootstrap 中制作自动滚动页面
【发布时间】：2016-10-21 02:28:18
【问题描述】：

我想在这个链接中使用这个滚动导航 http://startbootstrap.com/template-overviews/scrolling-nav/

对于滚动页面，需要点击链接，但我希望自动完成，无需点击链接。

谁能帮我指出我在下面的代码 sn-p 中哪里出错了？

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
})

在我的项目中，没有任何鼠标可供单击，我需要 3 个具有不同数据的单独页面，我想动态显示这些数据，例如 10 秒显示第一页，然后滚动或移动到下一页和.. .. ，不停歇。

【问题讨论】：

无需点击？你的意思是？在hover?
其实我希望网站打开时页面自动滚动，因为在我的项目中没有鼠标可以点击

标签： javascript jquery twitter-bootstrap scroll navbar

【解决方案1】：

无限循环自动滚动页面

The setTimeout function 调用另一个函数在一段时间后执行。这些调用的循环可以通过clearTimeout 函数停止。
The ScrollSpy plugin 会根据滚动位置自动更改活动的 NavBar 项。

现在页面根据无限循环自动滚动。但是用户可以通过页面末尾的链接来阻止它。

jsfiddle codepen

// **** AutoScroll + ScrollSpy ****
var CORRECTION = 50;  // height of the navbar 
// don't forget to setup the data-offset attribute of the <body> tag

var DELAY_READING = 4000; // 4 seconds = 4000; 10 seconds = 10000
var DELAY_SCROLLING = 1500;

var links = [ '#section-start', '#section-green', '#section-blue', '#section-red', '#section-stop' ];
var timerId = 0;

delayLinks(0);

$( '#section-stop a' ).click(function(event) { 
  event.preventDefault();
  clearTimeout(timerId); 
});

$( '#navbar-1 li a' ).click(function(event) {
  event.preventDefault();
  scrollToLink( $(this).attr('href') );
});

function delayLinks( i ) {
  if( i >= links.length ) i = 0;
  scrollToLink( links[i] );
  
  var next = ( i == links.length - 1 ? 0 : i + 1);
  timerId = setTimeout(function() { delayLinks( next ) }, DELAY_READING ); 
}

function scrollToLink( link ) {
  selectLink = $( link );
  if ( selectLink.length ) {
    var top = selectLink.offset().top - CORRECTION;
    $('body,html').stop().animate({scrollTop: top}, DELAY_SCROLLING);
  } else {
    colnsole.log('The link is not found: ' + link);
  }
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  padding-top: 50px;
}

#section-green,
#section-blue,
#section-red,
#section-start,
#section-stop {
  height: 800px;
  padding: 10px 20px;
}

#section-green { background: #9c6; color: #cf9; }
#section-blue  { background: #69c; color: #9cf; }
#section-red   { background: #c69; color: #f9c; }

<body data-spy="scroll" data-target="#navbar-1" data-offset="50">
  
  <nav id="navbar-1" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#section-start">Start</a></li>
          <li><a href="#section-green">Green</a></li>
          <li><a href="#section-blue">Blue</a></li>
          <li><a href="#section-red">Red</a></li>
          <li><a href="#section-stop">Stop</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div id="section-start"><h2>Please wait for a few seconds</h2></div>
  <div id="section-green"><h2>Green</h2></div>
  <div id="section-blue"><h2>Blue</h2></div>
  <div id="section-red"><h2>Red</h2></div>
  <div id="section-stop"><h2><a href="#">Press to stop the loop</a></h2></div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

【讨论】：

@Mom 你什么意思？当我单击菜单项时，页面会平滑滚动到所需的块。
在我的项目中没有任何鼠标可以点击，我需要 3 个具有不同数据的单独页面，我想动态显示这些数据，例如 10 秒显示第一页，然后滚动或移动到下一页和 .... ，没有停止
@Mom 我已经添加了自动滚动。请再次检查我的答案。
非常感谢您的帮助，它运行良好，但是否可以删除“按再次重复”并使其循环，我不希望它停止。抱歉我不懂javascript
@Mom 我重写了我的脚本并在我的答案中添加了一些有用的链接。现在页面根据无限循环自动滚动。但是用户可以通过页面末尾的链接来停止它。

【解决方案2】：

只需将 animate 函数移出事件侦听器（但在 jQuery 的文档就绪函数中），无需单击即可执行。

$(function() {
    $('html, body').stop().animate({
        scrollTop: $($('a.page-scroll').eq(2).attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
});

您可以直接在帖子的链接中，在控制台中尝试。

注意：我添加了.eq(2) 以获取您帖子中链接的第二个按钮的href。

【讨论】：

它工作了，但只是一次并且只用于linke 2，有没有办法让它循环？我的意思是不停地
@Mom 你的意思是从页面顶部自动滚动到页面末尾？
是的，确切地说，例如从第 1 页循环滚动到第 3 页，并且没有任何停止，实际上每个页面都有几秒钟的延迟
将使用相同的函数，但更改从中获取 href 的锚点。您也可以使用 settimeout 来停止页面。抱歉，我没有时间编写所有这些代码。如果您有更多问题，请自行尝试并回来（发布另一个问题，我猜这个问题已解决）。