javascript - 如何在Jquery和bootstrap中实现自动滚动页面

标签 javascript jquery twitter-bootstrap scroll navbar

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

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

有人可以帮我指出下面的代码片段中哪里出了问题吗?

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

最佳答案

无限循环自动滚动页面

  1. The setTimeout function 在一定时间后调用另一个函数执行。这些调用的循环可以通过clearTimeout函数停止。

  2. The ScrollSpy plugin 根据滚动位置自动更改事件导航栏项目。

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

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>

关于javascript - 如何在Jquery和bootstrap中实现自动滚动页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37912253/

相关文章:

javascript - JavaScript 中的简单半小时计算器

javascript - 为什么 JQuery 单击功能在 dataTable 的后续页面中不起作用?

php - JavaScript 将 <br> 替换为\n

twitter-bootstrap - Bootstrap : how do I change the width of the container?

html - Bootstrap 3 :/two images responsive together

javascript - 仅保留数组中每个对象中的选定键

javascript - 我可以在 React Storybook 中创建一个旋钮来修改具有 4 个值的数组,其中每个值都有一个选择下拉列表吗?

javascript - Jquery分隔十进制数

javascript - 为什么点击按钮时 Div 不可见

css - 响应式 Bootstrap 超大屏幕背景图片