Using jQuery and Bootstrap 3 I am trying to create a one page Scrolling Website. Here is the Working Demo . So far it looks fine when user scrolls in sequence like from Section 1 to Section 2 or Section 2to Section 3 but I have some issue on nav navbar-nav items when user scrolls out of order like from Section 1 to Section 6. It looks like nav navbar-nav steps on each items to get the target item!(As you can see in following image)
There is also one other important issue on Section 7 scrolling. which it not scrolls to the same positions as other sections and there is more space. (As you can see in following image)
Here is the jquery which I used for Scrolling
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
Can you please help me to fix these thing on the code? Thanks
1) The problem with the last section should be ease to fix. There is not enought "room" underneath the last section and so the browser cannot scroll any further. A quick and dirty fix for that would be to insert some
<p> </p>
lines at the end of the last paragraph.
2) I think this could be tricky. The problem is that not the Sections, but the "html" and "body" elements are scrolled. That means if the user is at the first section and clicks on the last section the whole page is scrolled. The user sees all content during the scroll animation. I think that is how it is supposed to work. Otherwise you would have to change how and what you actually scroll.
Related
My goal is to have my page scroll to a specific div if a user has visited the page before. I am using the following code:
$('html, body').animate({
scrollTop: $("#userResults").offset().top - 72
}, 1000, "easeInOutExpo"
);
#userResults is the appropriate target div. The problem is, when the page loads, it scrolls to roughly the middle of the page. I've tried rearranging the divs out of the fear that one div that contained canvas elements was throwing things off, but that didn't work. I tried hardcoding a scroll value; I tried retrieving the page height and div heights to force a scroll position, but none of that worked. Further, when I test against different screen sizes, the scroll goes to different points around the middle of the page.
What is the most frustrating is that when I click on links on the loaded page that target divs, they go to the exact location. Those use the following code:
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 72)
}, 1000, "easeInOutExpo");
return false;
}
}
});
That last block of code comes from the template that I'm building from, which comes from: https://startbootstrap.com/themes/creative
Here's a codepen of the relevant code: codepen The specific code block can be found around line 99 of the javascript. Also, the codepen doesn't demonstrate the problem behavior, probably because it doesn't allow me to create variables in local storage.
I've been coding for about a year, so I'm no expert and may need a little handholding. How do I get this thing to scroll to the right position on load?
I replaced the scrolling animation of my one page website with another scrolling animation which changes the URLs when you use the topbar (it was build in foundation)
While the URLs now change when I click an item in the topbar all the other links or clickable elements on my page make it scroll back to the top of the page.
For example when I try to click the next/prev buttons of my slider it scrolls back to the top of the page as if I clicked on Home.
Can someone see whats wrong with the code for the animation?
$(document).ready(function () {
$('a[href^="#"]').click(function () {
var target = $(this.hash),
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;
});
});
PS: When I scroll manually the URLs don't change when I go down to the next page. If anyone has a fix for this I'll be happy to here from you! (I tried using history.js but that only seems to work if you have a server, which I don't)
//* EDIT *//
I just found out it's not all links that make it scroll to the top of the page, just the buttons of my orbit slider and the menu button when the topbar is collapsed
//EDIT 2//
The URL now changes when I scroll to the next page!
The only problem I am seeing right now is that the buttons of my orbit slider and the menu button of the collapsed topbar act the same as my home button (makes the page scroll all the way back to the top) for some reason.
So the last thing I need to do is get the buttons working again. Making the menu button expand the topbar and making the next and prev buttons of my slider work as normal
If you only want to change the hash depending on the scrollPosition you are half way there.
You'll need to bind some logic to the scroll event. Here is a fork of your Fiddle where the hash is changed on scroll.
When the user scrolls the page we iterate through all .page elements and compare their offset().top against $( document ).scrollTop().
We set the new hash to be the id of the last .page element that has a lower offset().top than $( document ).scrollTop() is.
(I also debounced the function so it doesn't fire constantly when scrolling - you could of course remove that part)
You should however consider that by changing the hash you will jump to the equivalent element. Here is a guide on how to suppress that behaviour.
EDIT:
Here is an updated Fiddle where I implemented the solution from above for suppressing forced scroll on hash change.
For some reason my page 'jumps' instead of smoothly scrolling after clicking an internal link in menu 2nd time.
I'm quite sure that has something to do with scrolling.js file, i'm a newbie in jQuery and probably messed something up. Since you've commented that it's working just fine let me explain it on example. I enter the page I can press "About" button in menu and it scrolls just fine, I can press the "Learn About Me" button and it works fine as well, go to top arrow on the side menu works too but if you scroll manually a bit and then try to press "About" in menu it doesn't scroll but jump even if you scroll back to top and press it the same way it worked after the page load.
the page itself.
scrolling.js
$(window).scroll(function(){
var height = $('section').height();
height = height * 0.2;
if ($(window).scrollTop() >= height) {
$('nav').css('background','rgba(0,0,0,0)');
$('nav').css('margin-left','0px');
$('.OTOCWEL').css('background','rgba(0,0,0,0)');
$('#powered').css('background','rgba(0,0,0,0)').addClass('fixerpowered');
$('.menu').addClass('menuslim');
$('.menu').removeClass('menu');
$('.menuslim').css('margin-left','0px').css('opacity','1');
$('#first').addClass('mega-octicon octicon-info').css('margin-left','0px');
$('#second').addClass('mega-octicon octicon-book');
$('#third').addClass('mega-octicon octicon-mail');
$('#fourth').addClass('mega-octicon octicon-diff-added');
$('.OTOCWEL').css('display','none');
$('.suwak').css('display','none');
$('.dzolero').css('display','block');
} else {
$('nav').css('background','rgba(0,0,0,0.5)');
$('.menuslim').addClass('menu');
$('.menu').removeClass('menuslim').css('top','0px');
$('#first').html("<a>About</a>").css('margin- left','15px').removeClass('mega-octicon octicon-info');
$('#first>a').attr('href','#about');
$('#second').html("<a>Projects</a>").removeClass('mega-octicon octicon-book');
$('#second>a').attr('href','#projects');
$('#third').html("<a>Contact</a>").removeClass('mega-octicon octicon-mail');
$('#third>a').attr('href','#contact');
$('#fourth').html("<a>Additional</a>").removeClass('mega-octicon octicon-diff-added');
$('#fourth>a').attr('href','#additional');
$('.OTOCWEL').css('display','initial');
$('.suwak').css('display','block');
$('#powered').removeClass('fixerpowered');
$('.dzolero').css('display','none');
}
});
scroll.js
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
I suspect your JQuery selector $('a[href*=#]:not([href=#])') is the source of the problem.
When it comes to your anchor links (the ones that do not redirect to a new page), you should make it such that all of them enable smooth scrolling.
Think about it, what is the main purpose of your anchor tags? It refers to a document address. The user mainly experiences:
Redirect to a new site.
Navigate through the current site.
Download request of a file.
Therefore, as long as your smooth scroll behavior is specific to all anchors; then you do not need to account for specific anchor behavior. Why? Because you do not care if the anchor redirects/download, smooth scroll should not trigger since the page does not move at all.
TLDR:
Try changing your JQuery selector from:
$('a[href*=#]:not([href=#])').click(function() { //...
To:
$('a').click(function() { //...
Do some unit testing for all scenarios. If that does not solve your problem, then we need to identify what other JavaScript is affecting your smooth scroll.
Thanks for the answer and the kudos for ideas :). I managed to change the selector so it affects all the anchor links not just the internal ones yet it didn't solve the problem. I've tried to test it with another menu section yet the result is the same. It's jumping to "Projects" section instead of smoothly scrolling. I also added instrumental button with anchor link to "Projects" section to see if it's a problem with scrolling script but it worked like a charm. Seems to me like it's a problem with menu script (scrolling.js) rather then with scroll.js
EDIT: The scrolling.js is deleting anchor links when the menu reaches 20% of section height then it rewrites them as menu goes vertical version. Is it possible that the scroll.js script is losing the focus on links as it doesn't scan the document all the time? And so is it possible to make the script rescan the document?
EDIT2: I've managed to fix it by removing the .html() function from scrolling.js
I've seen a few different threads seemingly about this but none of the answers in them have a working solution for me.
Here's what I want:
Big transparent header with a big logo on the top.
Small colored header with a small logo when user has scrolled past the topmost area.
I'm using navbar-fixed-top and and Bootstrap's scrollspy to add and remove certain classes from the header.
Here's why it hasn't worked so far:
$(window).scrollTop() doesn't return anything meaningful at all.
It seems wrong to change at a certain amount of pixels from the top anyway, since it can vary between screen resolutions.
Initiating a change based on what activate.bs.scrollspy captures works rather well except it shows the wrong header when I load the page for the first time.
It seems impossible to place a <div id="whatever"> at a certain spot and have the header change when scrollspy finds it. I've tried making the div 1px in dimension and placed at the absolute top of the page, but the scrollspy still identifies it from way off.
Here's my jQuery code at the moment, which is very imprecise AND shows the wrong header at the first load of the page (remember, you're not always at the top of the page when loading (reloading) the page!).
$(document).ready(function() {
$('body').scrollspy({ target: '.navbar-inverse' });
$('#main-header').on('activate.bs.scrollspy', function () {
var currentItem = $('.nav li.active > a').text();
var header = $('.navbar');
var logosmall = $('.small-brand');
var logobig = $('.big-brand');
if (currentItem == 'top' && header.hasClass('navbar-small')) {
header.removeClass('navbar-small');
header.addClass('navbar-big');
logosmall.css('display', 'none');
logobig.css('display', 'inline-block');
}
else if (currentItem != 'top' && header.hasClass('navbar-big')) {
header.removeClass('navbar-big');
header.addClass('navbar-small');
logobig.css('display', 'none');
logosmall.css('display', 'inline-block');
}
});
});
Wrap your code into window scroll event as mentioned below then only $(window).scrollTop() will work as you expecting.
$(window).scroll(function () {});
Here is a great example of your problem, it is a bit tricky to shrink your navbar but not impossible. You have to take into account a lot of things. I found this a while ago: http://www.bootply.com/109943
It is really strange that $(window).scrollTop() does not return anything by the way. What browser are you on? And your problem with reloading the browser:
$(window).load(function{
//logic to check how far scrolled
})
Would it be possible to create a smoother scrolling for a webpage?
For example MS Word 2013 has the kind of scrolling effect,
I'm searching for.
Haven't found any other examples yet.
I've heard that you can do pretty much that kind of stuff with AJAX, so would it be possible with that?
I don't want a smooth scroll to anchor, but when you scroll down the page freely with your mouse wheel or the scroll bar. But I'm searching for a similar effect to this ''smooth scroll to anchor''.
NiceScroll is what I was looking for.
It makes the scroll much smoother, as I wanted.
https://code.google.com/p/jquery-nicescroll/downloads/detail?name=jquery.nicescroll.350beta5.7z&can=2&q=
No. Scroll speed is determined by the browser (and usually directly by the settings on the computer/device). CSS and Javascript don't (or shouldn't) have any way to affect system settings.
You can try to fake it but the look and feel of the scroll bar would be compromised.
If and only if you capture the scroll events, then you would be able to adjust your content dynamically so that the portion you want is visible.
Flash might give you some liberty in acheiving your goal.
[EDIT]
PLEASE DO NOTE:THIS IS WITHOUT ANCHOR TAG
I tried to simulate a your query without any anchor tag.Although it's not perfectly answers to your question,it's still worth a shot:-
HTML:-
<div id="div1">asdf1</div>
<div id="div2">asdf2</div>
<div id="div3">asdf3</div>
<div id="div4">asdf4</div>
<div id="div5">asdf5</div>
<div id="div6">asdf6</div>
<div id="div7">asdf7</div>
<div id="div8">asdf8</div>
<div id="div9">asdf9</div>
<div id="div10">asdf10</div>
CSS:-
div {
height: 50px;
}
And finally add this to your jquery:-
$(document).ready(function () {
$("html, body").animate({
scrollTop: $("#div5").offset().top
}, 5000);
});
You can do it easily with JQuery
Load JQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
The above code will work perfect for the smooth scrolling