This problem has been driving me insane for the last couple of hours.
I have a one-page website design. The anchor links work perfectly fine on the page itself.
But I have a second page that will act as the Blog section.
When I try to use the anchors from here to link back to the sections on the index page, they do not position correctly.
Please see main page:
www.redcedarstudios.ca/themes/Haze/index.html
and then try to click the nav links back from the blog page:
http://www.redcedarstudios.ca/themes/Haze/post.html
The positioning is completely out of whack.
Any help or ideas is greatly appreciated.
Thanks
John
So I found a fix.
I added a $(window).load function that will read the hash tag from the url and scroll to onloading:
$(window).load(function() {
var hash = window.location.hash;
$(document).scrollTop( $(hash).offset().top );
});
If you can't get the above to work try this:
<script>
$(window).load(function() {
var hash = window.location.hash;
console.log(hash);
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
console.log("page loaded");
});
</script>
It will actually animate to the correct div if it didn't land on it how it should because of assets that needed to load. If you want to remove the animation, I couldn't get the above code to work by itself, but I used my example here combined with the above example:
<script>
$(window).load(function() {
var hash = window.location.hash;
console.log(hash);
$(document).scrollTop( $(hash).offset().top );
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
console.log("page loaded");
});
</script>
Related
Has anyone had this problem before? I am on an internal page (like about.html) and I want to scrollTop to an anchor in home page (like home.html#sectionID), but I don't know how can I do that with jQuery.. I've already tried some stuffs but it doesn't work.
Here is my actual code that works if I am in the home page..
$(".anchor-link").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top + (-117)
}, 1000);
return false;
});
Instead of using $(this).attr('href'), use any selector in the top of page where you want to scroll.
If you have #home id in top then you need to use:
$('html, body').animate({
scrollTop: $('#home').offset().top + (-117)
}, 1000);
I have a JQuery function where I want to reload my web page and scroll it to a specific div afterward.
I did this
$(document).ready(function() {
$('#mybutton').click(function(e) {
location.reload();
$('html, body').animate({
scrollTop: $("#myID").offset().top
}, 1000);
})
})
When I run my script, my page reloads very well but the scroll script doesn't run afterward like I want.
Please help
I guess we can use a cookie to make it work as we wish.. Im adding a small sample code .. Please check it out.. Please comment if you need more help.. If this solves ur problem then up voting this as answer will be much appreciated..
Thanks
$(document).ready(function() {
$('#mybutton').click(function(e) {
//$.cookie("reload", 1); // you can use this type of cookie if u have a jquery cookie plugin how ever i have added both type ..
document.cookie=1; // I know this is the absurd way to use cookies. just thought of solving your problem. if you need precise result then either use a jquery cookie plugin or use setCookie function.
reload=true;
location.reload();
})
console.log(document.cookie);
if(document.cookie==1) //if($.cookie("reload")==1)
{
document.cookie="0";
console.log(document.cookie);
$('html, body').animate({
scrollTop: $("#myID").offset().top
}, 1000);
//$.cookie("reload", 0);
}
})
$(document).ready(function() {
$('#mybutton').click(function(e) {
location.reload();
});
$('html, body').animate({
scrollTop: $("#myID").offset().top
}, 1000);
});
if you didn't want reload the page then on click it will work properly for that needs some modifiacation in code
$(document).ready(function() {
$('#mybutton').click(function(e) {
$('html, body').animate({
scrollTop: $("#myID").offset().top
}, 1000);
});
});
try my solution
inside your div add this type of link
<a name="exactline">Linking Directly to a Specific Location</a>
and when you call window reload do it this way
window.location.replace("http://yuorsite/yourCurentPage.html#exactline");
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);
});
I found a nice method to split large post, on blogger, into multiple pages here: http://blogtimenow.com/blogging/splitting-long-blog-post-blogger/
I'm trying to add a fade effect when switching pages, but i don't know how to do this, i have no experience when it comes to jquery...
I managed so far to make the page scroll back to the top, and added some animations using time values, but it's not looking quite right.
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').show(2000);
jQuery('.content2').hide(1000);
jQuery('.content3').hide(1000);
jQuery('.content4').hide(1000);
jQuery('.content5').hide(1000);
So basically what i want is the current "page" to fade out and the next "page" to fade in...
Use below code
below javascript will add effect fadeIn-fadeOut on page while switching the pages.
<script type="text/javascript">
$(document).ready(function() {
$("body").fadeIn(800);
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(400, redirectPage);
});
// Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
</script>
Put above code into <head> tag in your Html page
Add this code
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').fadeIn(2000);
jQuery('.content2').fadeOut(1000);
jQuery('.content3').fadeOut(1000);
jQuery('.content4').fadeOut(1000);
jQuery('.content5').fadeOut(1000);
I managed to create scroll to effect on a testing web-page. At first I had
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#static').offset().top
}, 1500);
});
})(jQuery);
which smoothly went on every page open to that anchor "static". Because header is big on page. so beside index page every navigation link would scroll past header down to anchor. That works perfect. But then I decided to make some submenu items. and they can't work because I use
<script type="text/javascript">
$(document).ready(function(e){
var str= location.hash;
var n=str.replace("_temp","");
$('html,body').animate({scrollTop:$(n).offset().top}, 500);
});
for that. This script can scroll down to anchor named "#something" on different page even and still smoothly scroll down. I found both scripts searching on Stack Overflow.
Problem is that when I use both of these, only 1st one works. They are similar so that's the problem. Is there any way to make them both work. If there is anchor "static" use first, if not use second?
How about
$(document).ready(function(e){
var str= location.hash;
var n=str.replace("_temp","");
if(n != "static") {
$('html,body').animate({scrollTop:$(n).offset().top}, 500);
} else {
$('html, body').animate({ 'scrollTop': $('#static').offset().top}, 1500);
}
});