Hi I'm developing a site and I'd like to make people scroll to an href id without showing it in the navigation bar of their browsers. If is it possible I'd like to do it with
Am I able to do it? Thanks
Example: index.html#id
How I want it: index.html
You can use Element.scrollIntoView to achieve this. The javascript needed is
var scrollToElement = function(id){
document.getElementById(id).scrollIntoView();
}
If you pass in {behaviour: 'smooth'} to the function you get smooth scrolling which is really slick.
Check https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView for further documentation on this function
pure JS version
Using window.scrollTo(x,y) you can move the viewport:
var elem = document.getElementById("your element id");
window.scrollTo(0, elem.offsetTop);
jQuery Version
If you are already using jQuery, you can use .animate() for a smooth scroll transition to the element.
Here is an example:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
See also here
Related
WARNING: I'm new to JavaScript.
I am developing a site for a family member and I've stumbled upon a problem. I am using Bootstrap 4 for the site, and therefor their navbar framework. The navbar is fixed to the top, and uses ScrollSpy to highlight the active section.
I am using this code from W3 to have my Nav links slowly scroll down the page to a section.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
No luck. My nav links nolonger work, and I get these nasty console errors
master.js:15 Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement.<anonymous> (master.js:15)
at HTMLAnchorElement.dispatch (jquery-3.2.1.slim.min.js:3)
at HTMLAnchorElement.q.handle (jquery-3.2.1.slim.min.js:3)
I know what you're thinking, master.js is sourced before jQuery. Nope!
I would appreciate any help I can get on this.
See the answer here: jquery : $().animate() is not a function
You appear to be using the slim build of jQuery 3.2.1, which doesn't
include most of the library. Instead, you should be using the full
version.
https://code.jquery.com/jquery-3.2.1.js
I have a onepage with a scroll menu. I want the same menu on my imprint site.
I want to link the menu to my main page but then remove the #div from the URL.
www.example.com/#div
www.example.com/
Can you please help me, thank you.
use preventdefault() jquery function that should avoid to pass href value in url
jQuery(document).ready(function(){
jQuery(clicked_elemnt).click(function(e){
e.preventDefault();
jQuery("html, body").animate({
scrollTop: jQuery($(this).attr('href')).offset().top - 0
}, 500);
})
})
include jquery before above code
You can do like this
var x = 'www.example.com/#div'
x.replace("#div","")
Got an issue with a navbar I'm creating for a WordPress site. Some of the links are meant to scroll down to different places on the homepage and some are outside links to other places on the site. Something like this:
<div class="main-navigation">
<ul>
<li class="link1">Link 1
<li class="link2">Link 2
</ul>
</div>
Basic stuff.
So if I add the following Javascript in the footer....
jQuery(document).ready(function() {
jQuery('.main-navigation a' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
Link 2 will scroll down but since Link 1 isn't supposed to scroll, if you click on it, nothing happens like it's a null link.
I thought I could change the reference to something like
jQuery('.main-navigation a.link2' ).click(function(){
So only link 2 does the scrolling, but that just makes it jump to the page like an old anchor tag trick in the 1990's.
Tried a few variations of the same idea, and nothing clicked. Anyone know what the right code would be to target just the buttons that need to have the scrolling?
Building from itsgoingdown's answer. The animation is ignored because the default link event still fires. If you pass the event and also prevent the default, you'll be set. See below.
$(document).ready(function() {
$('.main-navigation a[href^="#"]' ).click(function(event) {
// Prevent default link action
event.preventDefault();
// Grab location to send to
var href = $(this).attr('href');
// Scroll the page, animated
$('html, body').animate({
scrollTop: $(href).offset().top
}, 700);
});
});
Here is a live JSFiddle to show as well.
https://jsfiddle.net/y3nutj22/5/
Thanks to the both of you. I finally figured it out and in a sense, you're both right. However, neither of your codes produced the scrollTo effect. While '.main-navigation a[href^="#"]' was partially correct, my issue....and I finally realized it this morning....was I hard coded in the URL's in WordPress' menu feature as a complete URL. So just using '#' wouldn't work. Also, since it's WP, I can't use $'s in the code, Have ot use jQuery, of course.
This is the code that did the trick.
jQuery(document).ready(function() {
jQuery('.main-navigation a[href^="http://path.to.url/#"]' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
with path.to.url representing the actual URL, of course.
Thanks again!
im doing a page, I've manage to create a one page website, with a fixed menu.
My problem: I want to add the scrollto.element jquery to my page, already tried Smint, Ariel Flesler and Infinty.js, none worked.
Im new to jQuery but I think I can setup things with the guide/tutorial but its just not working.
Can someone help out?
My Temporary Test Host: http://styleeuclides.site50.net/#home
If you're just looking to animate a scroll to an element, the following should do it:
$('.button1').click(function() {
$('html, body').animate({
scrollTop:$('element-to-scroll-to').scrollTop()
}, 250);
});
Something like that should do the trick.
I am trying to learn jQuery and I'm having a mental blank at the moment. The following code scrolls my page to the top with a smooth transition, but I would like this smooth transition to work for all anchor/ID links on my site (it's only a one pager).
$(document).ready(function() {
$('a[href="#the-top"]').click(function (e) {
$("html, body").animate({ scrollTop: $('#the-top').offset().top }, 1000);
return false;
});
});
How can I change my code to achieve this?
jQuery(function($) {
$('a[href^=#]').bind('click', function (evt) {
var $what = $('#' + $(this).attr('href').split('#')[1]);
$('html, body').stop().animate({ scrollTop: $what.offset().top }, 1000);
evt.preventDefault();
});
});
Changes suggested in this code:
Change global $ object to jQuery
Just jQuery(fn) as document.ready(fn)
Closure: use jQuery as $ inside that function
Prevent default event from anchor instead of return false (source: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)
Use of $what asking for the #something part of anchor href, in order to prevent misbehaviors in IE (because if you have href="#some" sometimes it become href="http://yoursite.com/yourcurrentpage/#some instead)
All of these are kind of optional. You get the idea. Feel free to change.
DEMO AT: http://jsfiddle.net/Nm3cT/
Take a look at Chris Coyier's smooth Scrolling script. It does exactly that and needs no further configuration. Plus, it updates the address on the browser.