Everything is working as it should, however the URL does not change when the jQuery is in place. Is there anyway to have it smooth scroll and change the url at the same time? I tried a different method before this however it wasn't as cross browser compatible as this.
My HTML is:
<li class="representing-you-online">Representing you online</li>
<li class="developing-your-people">Developing your people</li>
My jQuery is:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
return false;
});
});
$(document).ready(function(){
$('#logo a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
Thanks!
Replace the click handling code for your anchors like this:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
var hash = this.hash;
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500, function (){
location.hash = hash;
});
return false;
});
});
Please note the complete function in the end of the jquery .animate(). It changes the URL.
See the demo here.
Related
I'm getting closer to HTML, CSS ,JAVA in BOOTSTRAP.
I'm trying to "merge" the SCROLLSPY function to SCROLLTOP. I would like to change appearance (size, color ...) All responsive.
For SCROLLTOP I use this script but it is not responsive:
$(document).ready(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() >= 50) {
$(".navbar").addClass("compressed");
} else {
$(".navbar").removeClass("compressed");
}
if ($(window).scrollTop() >= 1000) {
$(".navbar").addClass("compressed2");
} else {
$(".navbar").removeClass("compressed2");
}
});
});
For SCOLLSPY I use this:
$(document).ready(function(){
$('body').scrollspy({target: ".navbar", offset: 50});
$("#navbarTarget a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
There is a way to use ID or HREF ... or other functions (which I do not know) to start an animation.
THX
I'm currently working on implementing my own version of snap-scrolling using vanilla JavaScript, and while I've got it mostly working as of now, I'm having trouble handling the scroll events.
My HTML looks something like this:
<div class="container">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
</div>
And my JS looks something like this:
var pos = 0;
var isScrolling = false;
var id = 1;
$(window).scroll(function() {
if (!isScrolling) {
isScrolling = true;
var curPos = $(this).scrollTop();
if (curPos > pos) {
// scrolling down
if (id < 4) {
id++;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500);
}
} else {
// scrolling up
if (id > 1) {
id--;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500);
}
}
isScrolling = false;
pos = curPos;
}
});
What currently happens is when I scroll down my mouse wheel, it will do the animation but will keep proceeding to the next divs because of the multiple scroll events being fired. How do I make it so that it only listens to the first event (whether it scrolls up or down)?
A hacky way is to use timer:
var pos = 0;
var isScrolling = false;
var id = 1;
var lastScrollTime = $.now();
$(window).scroll(function() {
if ((!isScrolling)&&((($.now()-lastScrollTime)>3000)) {
isScrolling = true;
var curPos = $(this).scrollTop();
if (curPos > pos) {
// scrolling down
if (id < 4) {
id++;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500);
}
} else {
// scrolling up
if (id > 1) {
id--;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500);
}
}
isScrolling = false;
pos = curPos;
lastScrollTime = $.now();
}
});
You can register one time listeners in jQuery using jQuery.one.
EDIT:
You can use the complete callback of jQuery.animate to stop/start responding to scroll events.
var isScrolling = false;
$(window).on('scroll', function () {
if (!isScrolling) {
isScrolling = true;
var curPos = $(this).scrollTop();
if (curPos > pos) {
// scrolling down
if (id < 4) {
id++;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500,function(){
isScrolling = false;
});
}
} else {
// scrolling up
if (id > 1) {
id--;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500,function(){
isScrolling = false;
});
}
}
pos = curPos;
}
});
There's no easy way to deal with what it is known as kinetic scrolling.
Browsers do not provide developers a proper way to distinguish the meaningful scrolling from the inertial ones.
However, there are some attempts out there that aims to solve this issue, such as Lethargy.
Not 100% ideal, but very close to it.
Other than that, you can take a look at libraries like fullPage.js where another attempt to solve the issue was made.
I want to find data in HTML with tag search input, when it is clicked to "find" it will scroll to where the data is placed.
$(function() {
$('#searchBar').on('click', function(){
if(searchBar.value == '.profiles'){
var target = $('.profiles');
target = target.length ? target : $('[name = reynaldo' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
That's the code I tried, please help me
First time posting here! Stack overflow told me to include the code from codepen.io so I did, but I think the actual link is more useful than reading the code from here.
I applied this http://codepen.io/haustraliaer/pen/leKny/ javascript code to my websites and it works great. I want scrolling past the pages to update the links so that when i scroll down and click next, it doesn't go back up where the previous anchor link lies.
I tried using scroll event and getBoundingClientRect but it seems that I can't get it to work like that.
Any help towards to solution would help me greatly.
Here is link to my homepages http://quki.kapsi.fi/wasd
$('.js-scroll-to').click(function(e) {
target = $($(this).attr('href'));
if (target.offset()) {
$('html, body').animate({
scrollTop: target.offset().top + 'px'
}, 600);
}
e.preventDefault();
});
$('.js-next').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos + 1);
var prev = anchors.get(pos - 1);
target = $(next);
$(selected).removeClass("js-current-panel");
$(next).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({
scrollTop: target.offset().top + 'px'
}, 600);
}
e.preventDefault();
});
$('.js-prev').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos + 1);
var prev = anchors.get(pos - 1);
target = $(prev);
$(selected).removeClass("js-current-panel");
$(prev).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({
scrollTop: target.offset().top + 'px'
}, 600);
}
e.preventDefault();
});
$('.js-scroll-to').click(function(e) {
target = $($(this).attr('href'));
if (target.offset()) {
$('html, body').animate({
scrollTop: target.offset().top + 'px'
}, 600);
}
e.preventDefault();
});
$('.js-next').click(function(e) {
$('.js-prev').show();
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos + 1);
var prev = anchors.get(pos - 1);
if (pos <= 4) {
target = $(next);
$(selected).removeClass("js-current-panel");
$(next).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({
scrollTop: target.offset().top + 'px'
}, 600);
}
if (pos == 4)
$('.js-next').hide();
}
e.preventDefault();
});
$('.js-prev').click(function(e) {
$('.js-next').show();
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos + 1);
var prev = anchors.get(pos - 1);
console.log(pos)
if (pos > 0) {
target = $(prev);
$(selected).removeClass("js-current-panel");
$(prev).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({
scrollTop: target.offset().top + 'px'
}, 600);
}
}
if (pos == 1) {
$('.js-prev').hide();
}
e.preventDefault();
});
Below is the working Example
http://codepen.io/krishnareddy668/pen/MyqwJz
I'm using the the JavaScript code below to create a scroll effect from my nav to the anchor.
The problem I am having is I want the scrolling to stop 100px above the anchor.
What would I need to change in this code to achieve this result?
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 1000);
return false;
});
});
Thank you
Subtract 100 pixels from target.offset().top. like so:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top-100 }, 1000);
return false;
});
});