如何在 Jquery 和 bootstrap 中制作自动滚动页面

Question

我想在此link中使用此滚动导航 http://startbootstrap.com/template-overviews/scrolling-nav/

对于滚动页面，需要单击 link，但我希望自动完成此操作而无需单击 link。

谁能帮我指出我在下面的代码片段中哪里出错了？

//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 秒显示第一页，然后滚动或移动到下一页，然后.... , 不停歇。

Answer 1

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

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

您可以直接在 post 的 link 控制台中尝试。

注意：我添加了 .eq(2) 以获取 post 中 link 的第二个按钮的 href。

Answer 2

无限循环自动滚动页面

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

现在页面会无限循环自动滚动。但是用户可以通过页面末尾的link停止它。

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>

如何在 Jquery 和 bootstrap 中制作自动滚动页面

How to make Auto scroll page in Jquery and bootstrap

javascript

jquery

scroll

navbar

twitter-bootstrap

无限循环自动滚动页面