Scroll to NEXT/PREV buttons with Bootstrap ScrollSpy - javascript

I was looking through answers for creating next and prev buttons that go through anchor points on a page, but couldn't find something I need. This one might of been close to what I wanted so I decided to use it as a starting point: How can I make a link go to the next anchor on the page without knowing anchor name?
I created a fiddle with the concept presented in that answer and tried to make it work together with bootstrap's scrollspy (detects the current section and anchor).
I have gotten this far: http://jsfiddle.net/gukne0oL/2/
$('.next').click(function (e) {
e.preventDefault();
var current_anchor = $('li.active a');
var next_anchor = current.next('li a');
$('body').animate({
scrollTop: next_anchor.offset().top
});
})
$('.previous').click(function (e) {
e.preventDefault();
var current_anchor = $('li.active a');
var previous_anchor = current.prev('li a');
$('body').animate({
scrollTop: previous_anchor.offset().top
});
})
The original answer targets the <a> tag, but in bootstrap's scrollspy, it adds the active class to the <li> tag wrapping the <a> tag. So I changed it accordingly... I feel like it's close? but I can't tell...
Can anyone help? Thank you!

Target active li, find the previous/next li, and drill down to the anchor.
http://jsfiddle.net/gukne0oL/9/
// Activate bootstrap scrollspy
$('body').scrollspy({
target: '.navbar'
})
$('.next').click(function (e) {
var next = $('.navbar ul li.active').next().find('a').attr('href');
$('html, body').animate({
scrollTop: $(next).offset().top
}, 500);
})
$('.previous').click(function (e) {
var prev = $('.navbar ul li.active').prev().find('a').attr('href');
$('html, body').animate({
scrollTop: $(prev).offset().top
}, 500);
})

Related

Scroll to a div using jQuery from other page

When I click href #demo-1 from home page to another page with ection id='demo-1'.
How when loading the page with id='demo-1', that it will scroll down from the top of the page.
If I use https://stackoverflow.com/a/3432718/6891215 it will jerk and not scroll from the top of the page down to that section.
Many thanks!
The code below allows you to scroll on both same and external pages. To make the link work you need to give it a class .scroll. If you're linking to an anchor link on an external page, give the link a data-target="external" as well.
$(document).ready(function() {
$('html, body').scrollTop(0);
var str = window.location.href;
if(str.indexOf('#') > -1) {
var anchor = str.substring(str.indexOf('#'));
setTimeout(function() {
$('html, body').animate({scrollTop: $(anchor).offset().top}, 'slow');
}, 100);
}
$('a.scroll').click(function(e) {
var trg = $(this).attr('data-target');
if(trg != 'external') {
e.preventDefault();
var href = $(this).attr('href');
$('html, body').animate({scrollTop: $(href).offset().top}, 'slow');
}
});
});
The link to an anchor on an external page will look like this:
DEMO 2
Also, you can link to an anchor on the same page. In this case, you won't need to add any data-target. I wrote the script the way that is supports both:
Go TO DEMO 3

Limiting area of page scroll on navigation click

I am using the following jquery code to scroll to particular sections when a menu in the navigation tab is clicked. You must have well guessed by now that its a one page website. So coming further, the problem is that when the menu is clicked it scrolls to that particular DIV section but the header hides behind the menu's div. I mean it scrolls way too much up. I want to limit the level of scrolling. Say the it should stop 200px before than what it actually reaches a stop point now. Is it possible?
Here is my code
$(document).ready(function() {
$('body').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $($href).offset();
var $li = $(this).parent('li');
$li.addClass('active');
$li.siblings().removeClass('active');
$('body,html').animate({ scrollTop: $anchor.top }, 1000);
return false;
});
});
Instead of hard coding the header value, a better approach would be dynamically getting the height of header, so it won't create issues in mobile and other devices.
$(document).ready(function() {
$('body').find('a').click(function(){
var $heightEx = $('.navbar').height(); // use your respective selector
var $href = $(this).attr('href');
var $anchor = $($href).offset();
var $li = $(this).parent('li');
$li.addClass('active');
$li.siblings().removeClass('active');
$('body,html').animate({ scrollTop: ($anchor.top - $heightEx) }, 1000);
return false;
});
});
EDIT
This is the code I personally use
$("a").on('click', function(event) {
$heightEx = $('header').height();
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: ($(hash).offset().top - $heightEx)
}, 800);
}
});
Maybe, you need to change 'animate' scrollTop parameter:
$('body,html').animate({ scrollTop: $anchor.top - 200px }, 1000);

Bootstrap scrolling navbar issues

The website I'm working on: zarwanhashem.com
You can find my previous question (which includes my code) here: Bootstrap one page website themev formatting problems
The selected answer solved my issues but I have another problem because of the jQuery adjustment with the -50. Now the navbar incorrectly indicates the page I am on. i.e. The navbar is supposed to darken the section that you are currently in. So if you click "about" it will take you to the about page and darken the about link in the navbar. But the link BEFORE the page you are on is highlighted because the -50 makes the navbar think that it is on the previous section. You can easily try this to see what I mean.
How can I fix this? Thanks. The reason I didn't add this onto my old question is because the person stopped looking at it.
Also please keep your explanations simple/dumb them down a little for me. I know very basic HTML and CSS, and I don't know any Javascript.
scrolling js:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//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 -50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
js added at end of document as suggested by poster in previous question:
$(window).ready(function(){
$('div[class^="content-section"]').css('min-height', $(window).height());
})
You are putting the .active class on the wrong element somehow. You need to put the .active class on the clicked element. You should handle the active state with js. This is my solution based on your HTML structure but I'm sure there are different solutions as well.
$(document).on('click', '.page-scroll', function(event) {
var clicked = event.target; //get the clicked element
if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
$(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
$(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
}else{
$(clicked).parent().siblings().removeClass('active');
$(clicked).parent().addClass('active');
}
}
Let me know if this works for you.
EDIT after you posted your code
Try replacing your function with this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
if($($anchor).closest('ul').hasClass('dropdown-menu')){
$($anchor).closest('ul').parent().siblings().removeClass('active');
$($anchor).closest('ul').parent().addClass('active');
}else{
$($anchor).parent().siblings().removeClass('active');
$($anchor).parent().addClass('active');
}
event.preventDefault();
});
});
here is a work around this problem.
just change the contents of your scrolling-nav.js to the following:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//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 -50
}, 1500, 'easeInOutExpo', function(){
$('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
$($anchor).parent('li').addClass('active');
});
event.preventDefault();
});
});

Navigate slow to id in URL

On my homepage I have a menu with ID's, when I click it, it slides to the corresponding div and it works smoot.
But when I'm not on my homepage and I click an item I want to be able to go to the homepage and then slide to the section.
Here is the code I'm using now:
$('#mainMenu a').click(function(e){
e.preventDefault();
var div = $(this).attr('href');
if('<?=get_site_url()?>/' == '<?=get_permalink()?>')
{
$('html, body').animate({scrollTop:$(div).position().top}, 'slow');
}
else
{
window.location.href = '<?=get_site_url()?>/'+div;
}
});
This works excellent, the next part works to but I can't get it to slide to the ID.
if (window.location.hash != "") {
e.preventDefault();
$('html, body').animate({scrollTop:$(window.location.hash).position().top}, 'slow');
}
Is there a way I can prevent the browser from directly jumping to the section and instead sliding to it?
Try to scroll to top right at the start, then roll down:
if (window.location.hash != "") {
$('html, body').scrollTop(0).animate({scrollTop:$(window.location.hash).position().top}, 'slow');
}
Also, remove e.preventDefault(), since you're not defining any variable named e nor an event.
This works like a charm:
$('#mainMenu a').click(function(e){
e.preventDefault();
var div = $(this).attr('href');
if('<?=get_site_url()?>/' == '<?=get_permalink()?>')
{
$('html, body').animate({scrollTop:$(div).position().top}, 'slow');
}
else
{
localStorage.setItem("hash", div);
window.location.href = '<?=get_site_url()?>/';
}
});
if (localStorage.getItem("hash")!=null) {
$('html, body').animate({scrollTop:$(localStorage.getItem("hash")).position().top}, 'slow');
localStorage.removeItem("hash");
}
Instead of putting the hash in my url I stored it in localStorage and in my head of the page I checked if it was set.
Founded this solution just a few minutes after posting the question, thanks to those who helped me :)

jquery scrolling won't scroll from exact location

I'm using the following jquery to make my links scroll to the next div. However, I've run into a problem. From the top of the page the script works fine. As soon as I click a link from another div (another link further down the page) the script only scrolls so far either up or down but not to the next specified div. How can I make the script scroll fully from the current location of where the link is located?
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
You have a error here:
scrollTop: $($anchor.attr('href')).offset().top
//------^^^^^^^---------------------------------this itself a selector
change to this and try with:
scrollTop: $anchor.attr('href').offset().top
or this one too:
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
CHECKOUT IN FIDDLE
You're not calling the correct spot...
this should do the trick... Set the anchor point first.
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
ok, so I've made you a JSFiddle, the js-code I rewrote to the code below, but you can have a have a look at the full thing here: http://jsfiddle.net/re7Xc/
$(function() {
$('a.scrolltonext').click(function(event){
event.preventDefault();
var parentblock = $(this).parent();
var nextblock = parentblock.next();
//nextblock.css('background-color','#00f');
if(nextblock.size()>0) {
$('html, body').stop().animate({
'scrollTop': nextblock.offset().top
}, 800);
}
});
});
the catch in this script though is that I put the links in the div itself, so it's not in a #nav somewhere. So you'd have to rewrite that part if you put the links in your #nav!
I put an if-statement in there as well, because I thought it'd be better if you check if there is a next-div first, before scrolling there.
Hope it makes some sense, and let me know if it works for you!
cheers

Categories

Resources