Webpages with jump links - javascript

I am new in the world of web development so excuse my ignorance in some points :p
Anyone can tell how jump links work? And how to implement them?
Let me make a specific example, I want to create a website with an horizontal bar, I saw some modern sites that those links doesn't change the page, they just jump down to another section and if I scroll up, I end up on home again.
How can I implement this and does it work with bootstap?
Thanks

That, my friend, is a single page website, they are not jump links, you are only using jquery to scroll down to the content on click.
Here is an example of a code that will do just that :
$(function() {
$("#abc").bind("click", function() {
$("html, body").animate({
scrollTop: $("#anchor").offset().top
}, 500);
});
})(jQuery);
When you click on an element with an id of abc it will take you to the top of the #anchor id element, no matter where on the page it is found.
Also, here is an example using this exact code : jsfiddle

Go to title1
Go to title2
/* Lots of space */
<a name="title1">Title 1</a>
/* Lots of space */
<a name="title2">Title 2</a>

Related

Trigger 2 events on href? Scroll to top, then load

I have a question, I would like to trigger a specific event in javascript or jquery on a webpage. The page has an animation effect during page loads (the screen and content splits in two and slides open revealing the next content). This works fine when the content on the page fits and doesn't need to be scrolled. However when content needs to be scrolled, the effect doesn't look as good. Is there anyway to trigger an href to scroll back to the top of the page and THEN load the href link/target? In basic terms something like "on click scroll to top and then load link" Any help would be great! Thanks
One could use jquerys animate to scroll to the top, then if that finished redirect:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow", ()=> location.href = this.href );
return false;
});
try it

href link won't go to top of page

In my site, http://lol.bu.edu/ctl/home-2/, when I click on the Questrom Team Learning button, it goes to the link correctly, which is http://lol.bu.edu/ctl/home-2/#after_layer_slider_1.
However, if I manually type in the link or refresh the page in mobile (screen width less than 750px), it goes to the same height location for the link as it would normally go to for a full width (which is further down on the page for mobile).
Sometimes when I refresh the page it briefly goes to the right location before scrolling down again.
Is this a javascript problem and how would I solve it?
Your page http://lol.bu.edu/ctl/home-2/#after_layer_slider_1
remove the #after_layer_slider_1 at the end of the url. The #after_layer_slider_1 is targeting a location on your page and is why it is moving down. Jus t simply remove that part of the url and it will load at the top of the page.
and if you do not want to have it do that at all ctr+f and look for "after_layer_slider_1" in your javasrcipt, delete that part and it will stop doing the page scroll alltogether.
Just feast your eyes, on below, bro
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
});
Live Demo (smooth scroll to top)

Smoothscroll bounces up and down on different anchors

I have this problem with smooth scrolling on my website, where the script scrolls down to the <div>, but if you click the same <div> or any other <div>, it doesn't seem to understand where the next <div> is. Instead, it'll just bounce up and down around the same kind of area it was just at.
This is the website in question.
The script I'm using:
jQuery(document).ready(function() {
jQuery('a[href^="#"]').click(function(e) {
jQuery('#main').animate(
{
scrollTop: jQuery(this.hash).offset().top - 50
}, 1000);
return false;
e.preventDefault();
});
});
This will work fine only if I click the link when I'm at the top of the page, but won't work at all if it's from one link straight to the other.
Could someone have a look at the website and attempt to fix this please? As I'm a little out my depth with JavaScript.
Thank you.

Scroll to link with skrollr

I am using https://github.com/Prinzhorn/skrollr to animate the background of my site as I scroll. However I am also wanting to have my links scroll up and down the page like a normal single page site would do.
The problem is that both are working if I manually scroll the background changes, if I click the link the page scrolls to the correct place. The problem is that when I click the button the background doesn't scroll as well.
It seems like I am working with two different scroll functions and as a result they aren't working together and I need to use the same one.
Here is the code.
js - Scroll to link:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
js – Skrollr init
skrollr.init({
smoothScrolling: true,
forceHeight: true
});
I will try put together a fiddle to make it more clear but hopefully the answer is really simple.
If anyone else ever faces this problem the answer lies her: https://github.com/Prinzhorn/skrollr-menu
This will allow you to scroll to you internal links along with Skrollr animations. A HUGE plus and a very simple fix, you don't even need any of your own scrolling code just this and it will work with you links.
There's a way to do this, Skrollr has some methods very useful, in console, just type the variable contains skrollr, it will show some methods that you can use, one of them is "setScrollTop(int, bool)", so just call this method with the info you need, for example:
s.setScrollTop(9000, true)
Which means that I want it to scroll to the height position 9000. It works fine, you just need to know the height position where you need to go.

ScrollTo... How to scroll to a certain number of pixels above a #?

Okay, my issue is that I have a fixed navigation bar occupying 115 pixels of space at the top of the screen. When you scroll "to" a section, the fixed bar is covering part of the section. What I need it to do is scroll roughly 130 pixels (115 px for the nav bar and a little extra room so it doesn't look too cramped) above the section it's supposed to scroll to.
I set up a quick and dirty JSFiddle so you can get the idea.
I assume I should be using offset or over in this, but they don't seem to do anything:
$('#navigation a').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
$.scrollTo( this.hash, 1500, {easing:'elasout'});
});
Here is where I got the script from and examples if they may help you.
I would also love to eliminate the #hash links that get appended to the URLs to keep from flooding the back history. There's really no need for them since the navigation bar is fixed and you can access any section of the site just by clicking a new link on the nav. But that's not a primary concern.
Appreciate the help.
Quick example! NOTE: Not using the plugin from your example - Tested only in Firefox & Chrome
DEMO: http://jsfiddle.net/6DTLc/4/
$('ul#navigation').find('a').on('click', function(e) {
var
link_href = $(this).attr('href'),
$linkElem = $(link_href),
$linkElem_scroll = $linkElem.get(0) && $linkElem.position().top-115;
$('html, body')
.animate({scrollTop: $linkElem_scroll}, 'slow');
e.preventDefault();
});

Categories

Resources