Go to anchor without changing url
You could find the vertical position of the anchor with that id, and then scroll to that position.
Scroll with anchor without # in URL
Take this answer from Jeff Hines using jQuery's animate:
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
If you're using jQuery don't forget to add the library to your project.
Edit: Also, make sure that you still "return false;" in the click handler for the link, otherwise it'll still add the "#div1" to your URL (thanks @niaccurshi)
Change URL on scroll to anchor and then remove when reach the top
Add this condition:
if ( $(window).scrollTop() == 0 ) {
window.history.pushState(null, null, window.location.pathname);
} else {
window.history.pushState(null, null, urlHash);
}
so if you're at the very top hash will be cleared. Hope it's something you wanted to achieve.
EDIT (added full script with changes):
// Source: http://stackoverflow.com/questions/30734552/change-url-while-scrolling
// stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport(el) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
// click-to-scroll behavior
$(".anchor").click(function (e) {
e.preventDefault();
var section = this.href;
var sectionClean = section.substring(section.indexOf("#"));
$("html, body").animate({
scrollTop: $(sectionClean).offset().top
}, 1000, function () {
window.location.hash = sectionClean;
});
});
// listen for the scroll event
$(document).on("scroll", function () {
console.log("onscroll event fired...");
// check if the anchor elements are visible
$(".anchor").each(function (idx, el) {
if (isElementInViewport(el)) {
// update the URL hash
if (window.history.pushState) {
var urlHash = "#" + $(el).attr("id");
if ($(window).scrollTop() == 0) {
window.history.pushState(null, null, window.location.pathname);
} else {
window.history.pushState(null, null, urlHash);
}
}
}
});
});
HTML anchor link with no scroll or jump
I'm probably missing something, but why not just give them different IDs?
<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>
Or whatever convention you'd prefer.
Angular 1 - $anchorScroll without changing URL
$anchorScroll as it's name says scrolls to anchor
or id
on page, as far as I know it will always change URL. But there are tons of different solutions for this problem.
One example - you can use native scrollIntoView (check compatibility, but it works in all decent browsers, even IE8):
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
So you would do something like this to get smooth scroll effect:
// play around with options if you want - you can put block: "start" which doesn't play very nice with jsfiddle but should work fine on any machine.
$window.document.getElementById(id).scrollIntoView({behavior: "smooth", block: "end"});
I've prepared quick example for you:
https://jsfiddle.net/pegla/eoa8v03y/4/
Using hash in url to display content, but do not scroll to anchor on page load
$(function() {
var Div1 = $('#Div1');
var Div2 = $('#Div2');
var Div3 = $('#Div3');
if (location.hash === "#Show_Div1") {
setTimeout(function() {
window.scrollTo(0, 0);
$(Div1).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
}, 1);
} else if (location.hash === "#Show_Div2") {
setTimeout(function() {
window.scrollTo(0, 0);
$(Div2).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
}, 1);
} else if (location.hash === "#Show_Div3") {
setTimeout(function() {
window.scrollTo(0, 0);
$(Div3).removeClass('is-visuallyhidden').siblings().addClass('is-visuallyhidden');
}, 1);
}
});
According what i understand
Hope this helps!!!
for more detail vistit how to disable anchor jump when loading a page
Scroll when clicking an anchor link only works once
I think this behaviour is caused by you setting the hash-position. If the hash is already set to it, the browser won't scroll.
How about
document.getElementById('anchor01').scrollIntoView();
Scroll to anchor on refresh or on manual URL change
I simply used a vue-router
navigation guard:
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
this.app.$scrollTo(to.hash, 700);
return { selector: to.hash }
} else if (savedPosition) {
return savedPosition;
} else {
//When the route changes, the page should scroll back to the top.
this.app.$scrollTo('#app', 700);
return { x: 0, y: 0 }
}
}
});
router.afterEach((to, from) => {
if (to.hash && to.path != from.path)
Vue.nextTick().then(() => VueScrollTo.scrollTo(to.hash, 700));
});
Unrelated to the question, but related to the navigation with hashes:
If you are publishing your website in GitHub Pages
, you'll need to add these next two parts.
Add a 404.html static page, to redirect the navigation back to the root page, but passing a few parameters in the sessionStorage
:
<script>
const segment = 1;
//Gets the relative path and the hash of the URL.
sessionStorage.redirect = '/' + location.pathname.slice(1).split('/').slice(segment).join('/');
sessionStorage.hash = location.hash;
//Forces the navigation back to the main page, since it's the only entry point that works.
location.replace(location.pathname.split('/').slice(0, 1 + segment).join('/'));
</script>
Alter your main.js
page to expect the redirect parameters:
new Vue({
router,
i18n,
render: (h) => h(App),
created() {
//If a redirect exists, tell the router.
if (sessionStorage.redirect) {
const redirect = sessionStorage.redirect;
const hash = sessionStorage.hash;
delete sessionStorage.redirect;
delete sessionStorage.hash;
this.$router.push(redirect + hash);
}
}
}).$mount("#app");
Related Topics
How to Get the HTML for a Dom Element in JavaScript
How to Maintain a Websockets Connection Between Pages
Sharing a Variable Between Multiple HTML Pages
How to Save Image from Canvas with CSS Filters
Trigger CSS Animations in JavaScript
Why Element.Style Always Return Empty in Js
How Send a Form with JavaScript When Input Name Is "Submit"
How Filereader.Readastext in HTML5 File API Works
Open Ie Browser in Firefox/Chrome Page
What Is the Correct Way to Write HTML Using JavaScript
Loading an Image to a <Img> from <Input File>
How to Create a Custom Scrollbar on a Div (Facebook Style)
How to "Reset" <Div> to Its Original State After It Has Been Modified by JavaScript
JavaScript - Head, Body or Jquery
Getting Mouse Location in Canvas
Html5 Filereader How to Return Result
Call Servlet and Invoke Java Code from JavaScript Along with Parameters