1

I want to use this scroll nav in this link http://startbootstrap.com/template-overviews/scrolling-nav/

for scrolling pages it is needed to click the link but I want this to be done automatically without need to click on the link.

could anyone help me pointing out where I'm going wrong in the code snippet below?

//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(); }); })

In my project there is no any Mouse for clicking and I need 3 separate page with different data, and I want to show these data dynamically for example 10 second showing page one and after that scroll or move to next page and .... , without stoppage.

Improve this question
2
  • Without the need to click? What do you mean? On hover? Commented Jun 19, 2016 at 21:59
  • 1
    in fact , I would like when the site opened, the pages scrolled automatically, because in my project there is no any mouse for clicking Commented Jun 19, 2016 at 22:10

2 Answers 2

Reset to default
1

Auto Scrolling page with infinite loop

  1. The setTimeout function calls another function for executing after a certain period of time. The cycle of these calls can be stopped by the clearTimeout function.

  2. The ScrollSpy plugin automatically changes the active NavBar item based on scroll position.

Now the page automatically scrolls according to an infinite loop. But the user can stop it by the link at the end of the page.

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

@Mom What do you mean? Page smoothly scrolls to the desired block, when I click on the menu item.
in my project there is no any Mouse for clicking and I need 3 separate page with different data, and I want to show these data dynamically for example 10 second showing page one and after that scroll or move to next page and .... , without stoppage
@Mom I've added the autoscroll. Please check my answer again.
thank you very much for your kind help , it is working well , but is it possible to remove "Press to repeat again" and make it loop , I don't want it stopped. sorry I don't know javascript
@Mom I rewrote my script and added some useful links into my answer. Now the page automatically scrolls according to an infinite loop. But the user can stop it by the link at the end of the page.
|
0

Just move the animate function out of the event listener(but inside the jQuery's document ready function) and it will be executed without the need of a click.

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

You can try it directly in the link of your post, in the console.

Note: I added the .eq(2) to get the second button's href of the link in your post.

Improve this answer

4 Comments

it worked but just for once and only for linke 2 , is there any way to make it loop ? I mean with out stop
@Mom you mean automatic scrolling from the top to the end of page?
yes , exactly , for example scrolling from page 1 to 3 in loop and without any stop , a few second delay in each page in fact
Would be using the same function, but changing the anchor from which you get the href. Also you can use settimeout in order to stop in a page. Sorry but I don't have time to code all that. Try it yourself and come back if you have more issues(post another question, this one is solved I guess).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.