We Keep Coding

Scroll to id href without #

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

ScrollTo: targeting specific buttons in a navbar

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!

Hide hash from URL when page jump

I have a link on my menu that targets to an anchor on another page.
<a href="http://www.mylink.com.br/mylink/#anchor">
And I want to hide the #anchor from URL.
I've tried another solution, look:
$('#menu #mylink2').click(function() {
document.location.href = "www.mysite.com/mysite/";
});
and then, I need to activate a script to scroll to the div after the page loads:
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#divtoscroll").offset().top }, 2500);
});
but I don't know how to attach that event to the previous. The way it is, everytime the page loads, it scrolls to the div.
Any help?
I did it!
I added "contato" on the final of the URL to differentiate it from the other links.
$('#menu #mylink2').click(function() {
document.location.href = "www.mysite.com/mysite/contato";
});
And used it to recognize the URL and activate the document ready function.
var url = "www.mysite.com/mysite/contato";
if (location.href==url) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#allcontentcontact").offset().top }, 2500);
});
}
else {
}
Works perfectly! Thanks for the help.

As far as I am aware it is not possible to do this, as it is what tells the browser which section of the page to jump to.
You may be able to do this using the amount of pixels and javascript, but it would not work for all cases.
Example:
window.scrollBy(0, 500);
You could use jQuery to scroll to a specific element ID on a page, but this would require a trigger on that page, such as a click, or even page load. Example below uses click.
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2500);
});

Jquery link and URL hash

I'm new at jQuery and don't really know what I'm doing. I need some help.
I'm creating a web app. It has a header and footer that I want to stay on every page, so I decided to use jQuery to load a page into the main content div so every time a link is clicked, the whole page isn't reloaded.
Here's what I'm using to accomplish this:
<script>
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#main_content").fadeOut('fast');
$("#main_content").load(this.href);
$('html, body').animate({ scrollTop: 0 }, 0);
$("#main_content").fadeIn('fast');
});
});
</script>
And each link:
<a class="ajax-link" id="add" href="add.php"><span class="glyphicon glyphicon-plus-sign" style="margin-top:4px;"></span><div>add</div></a>
This works great EXCEPT the page address. My app uses PHP, and I need to be able to PHP Header to a page like 'index.php#about' that will load the index.php page and display the about.php in the #main_content div.
I tried this:
<script type="text/javascript">
$(document).ready(function(){
var id = window.location.hash;
$(id).trigger('click');
})
</script>
I can see where the link is selected (box around it), but it doesn't actually click it. I'm not sure why.
Thank you in advance for any help!

I think you could just get the hash, add a php extension and make an ajax call.
<script>
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
// Get the hash from the URL and append .php extension
// index.php#about ==> 'about.php'
var page = window.location.hash + ".php";
//Make an ajax call using the page variable.
$("#main_content").fadeOut('fast');
$("#main_content").load(page);
$('html, body').animate({ scrollTop: 0 }, 0);
$("#main_content").fadeIn('fast');
});
});
</script>

Tweak smooth scrolling code

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.