jQuery scrollTop jumping on FF and Safari - javascript

I have a jQuery scrollTop function that is activated on a button click, i also have a scrollView function that is activated on scroll.
The intention is that the landing image is either clicked or the user scrolls down, the landing image is hidden by the jQuery and the navigation menu shows.
This is working well in Chrome, but in FF and Safari, the page jumps further down the page and you have to scroll back up to see the top of the page.
Also, using the Divi WP theme.
Any help would be most appreciated!
Code below is what i have used, apologies new to Jquery so have put things together from different places, i'm sure this can be made simpler!
//click-scroll-hide
(function($) {
$(document).ready(function() {
$(".cf_news_link").click(function() {
$("html,body").animate({
scrollTop: $("#news").offset().top
}, 1000, function() {
$("#cf_my-header").hide();
$("#main-header").slideDown("slow");
});
return false;
});
});
})(jQuery);
//scroll-hide
jQuery(function($) {
$.fn.scrollView = function() {
return this.each(function() {
$('html,body').animate({
scrollTop: $(this).offset().top
});
});
}
var $header = $('#cf_my-header');
var $win = $(window);
var winH = $win.height();
$win.on("scroll", function() {
if ($(this).scrollTop() > winH) {
$header.addClass("hide");
$('#news').scrollTop();
$('#main-header').slideDown("slow");
}
}).on("resize", function() {
winH = $(this).height();
});
});

Related

Limiting area of page scroll on navigation click

I am using the following jquery code to scroll to particular sections when a menu in the navigation tab is clicked. You must have well guessed by now that its a one page website. So coming further, the problem is that when the menu is clicked it scrolls to that particular DIV section but the header hides behind the menu's div. I mean it scrolls way too much up. I want to limit the level of scrolling. Say the it should stop 200px before than what it actually reaches a stop point now. Is it possible?
Here is my code
$(document).ready(function() {
$('body').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $($href).offset();
var $li = $(this).parent('li');
$li.addClass('active');
$li.siblings().removeClass('active');
$('body,html').animate({ scrollTop: $anchor.top }, 1000);
return false;
});
});
Instead of hard coding the header value, a better approach would be dynamically getting the height of header, so it won't create issues in mobile and other devices.
$(document).ready(function() {
$('body').find('a').click(function(){
var $heightEx = $('.navbar').height(); // use your respective selector
var $href = $(this).attr('href');
var $anchor = $($href).offset();
var $li = $(this).parent('li');
$li.addClass('active');
$li.siblings().removeClass('active');
$('body,html').animate({ scrollTop: ($anchor.top - $heightEx) }, 1000);
return false;
});
});
EDIT
This is the code I personally use
$("a").on('click', function(event) {
$heightEx = $('header').height();
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: ($(hash).offset().top - $heightEx)
}, 800);
}
});
Maybe, you need to change 'animate' scrollTop parameter:
$('body,html').animate({ scrollTop: $anchor.top - 200px }, 1000);

scroll-to-top button on a mobile website

I'm trying to make the Scroll To Top button appear once the user started scrolling down, instead of it always being present, even when being at the top. Quick note, I barely have experience with JS, so I have no idea what I'm doing.
Anyway here is the page I'm having an error on: http://www.m.evans-carpentry.com/gallery/projects/
<script>
$(function() {
var $elem = $('#content');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
Thanks!
you call jquery earlier announcements of jquery on line 30
<script>$('#nav Li: has (ul)').doubleTapToGo ();</script>
insert this line after the call jquery
Your code is too complex, try this:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
".scrollToTop" is the thing to be clicked that scrolls back to the top of the page.

fixed navigation bar overlaying content when position is given dynamically

I am trying to create a one page website with multiple sections. my problem is that once I click on a link in the navigation bar it scrolls to the item but covers part of the content.
the navigation is only given static positioning when scrolling past its original position (Hope that makes sense). here is a link to my dev site http://wp.matthewwood.me/
here is my code for adding the fixed positioning using JQuery. i tried offsetting it by -50px to accommodate for the fixed nav size but this has not solved the problem.
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top - 50}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Any help would be appreciated
When you change from relative to fixed positioning, the block value of the div changes from it's height to zero. This causes the offset issue you are experiencing. See this fiddle here:
https://jsfiddle.net/7muk9zhh/5/
The main things that have changed:
JS:
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
$("#Main").css("margin-top", $(".navbar").height()); //Compensates for fixed positioning
} else {
$('.navbar').removeClass('navbar-fixed-top');
$("#Main").css("margin-top", "");
}
});
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
var globOffset = $(".navbar").height(); //Acts as an offset for the fixed element
$('body').stop().animate({scrollTop: $($anchor).attr('href').offset().top - globOffset}, 1500);
event.preventDefault();
});
HTML:
There is one more problem. The "#home" anchor is used in body. So when finding the offset top for this, it returns 0 (offset of the body element).
Also I think the custom easing 'easeInOutExpo' requires jQuery UI (if that isn't working you need to include it):
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Hopefully this answers your question!
Use this code: should work properly and has nice smooth scrolling effect:
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
//here it starts
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-90 //change value to your need
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
//end
});

hash scrolling navigation with sticky header, offset not working on firefox

I have a website with a stick to top header, when scrolling, half of my header disappear and the menu stick to top.
the navigation uses hash, by clicking on a link of my menu, the page scrolls to the linked #.
I've added a jscript to calcul the height of my stickyheader to add this height to my #link so my target is displayed right under my menu.
it works perfectly on Chrome & safari, but in Firefox, there's a problem, the height is not added, so my title is displayed under the menu.
And when clicking to "back to top", the position is not correct, there's an offset... only on firefox also.
I don't know if you understand what I mean, so here is a jsfiddle to see it in action :
http://jsfiddle.net/rHmAA/3/
here is my js :
$(document).ready(function () {
$('a[href^="#"]').bind('click.smoothscroll', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
var offset;
if($('#stickyheader').css('position') == 'relative'){
offset = $('#stickyheader').outerHeight(true)*2;
}else{
offset = $('#stickyheader').outerHeight(true);
}
$('html, body').stop().animate({
'scrollTop': $target.offset().top - offset
//--OFFSET--//
}, 1500, 'swing', function () {
window.location.hash = target;
});
});
});
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() === stickyHeaderTop+1) {
$('#stickyheader').hide();
console.log('p');
}
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').fadeIn(500).css('position','fixed');
$('#stickyalias').css('display', 'block');
var mT = $('#stickyheader').css('height');
$('#stickyheader').next('.post').css('marginTop', mT);
}else{
$('#stickyheader').css({
position: 'relative',
});
$('#stickyheader').next('.post').css('marginTop', '0');
}
});
});
can anybody help me with this ? I don't know what I am doing wrong,
thanks a lot for your help,
Try using this for the scroll animate
$('html, body').animate({
'scrollTop': $target.offset().top - offset
//--OFFSET--//
}, 1500);

Return page to original scrollTop position after closing popup

I have a button which fixes the position of the page content then pushes it left while a form slides in from the right.
This is working fine except for one thing. When the user has scrolled down the page slightly and clicks on the button it successfully fixes the position. However when they then close this form, the page does not return to the original position... it takes the user back to the top of the page. I've posted the jquery below which might help to explain the problem better.
There's also a jsfiddle example here...
http://jsfiddle.net/CMbBC/
var pageContents;
var currentscrollpos;
$(document).ready(function() {
$("a#testbutton").live('click', function() {
var currentscrollpos = $(window).scrollTop();
var pageContents = $("body").html();
$("body").html("");
$("<div class='pageContainer'>" + pageContents + "</div>").prependTo("body");
$(".pageContainer").css({'position':'fixed','top':currentscrollpos*-1});
$("html, body").animate({ scrollTop: 0 }, 0);
$("<div class='blackout'></div>").appendTo("body");
$(".blackout").css("opacity",0.8).fadeIn('slow', function() {
$("<div class='popupPanel'><a class='closeme'>close</a></div>").appendTo("body");
$(".popupPanel").animate({
right: "0px"
}, 500, function() {
$(".popupPanel").css("position","absolute")
});
$(".pageContainer").animate({
left: "-200px"
}, 500, function() {
});
$("a#testbutton").append(currentscrollpos)
});
return false;
});
$('.closeme').live('click', function() {
var pageContents = $(".pageContainer").html();
$(".popupPanel").css("position","fixed").animate({
right: "-200px"
}, 500, function() {
});
$(".pageContainer").animate({
left: "0px"
}, 500, function() {
$(".blackout").fadeOut('slow', function() {
$(".blackout").remove();
$("body").html(pageContents);
$("html, body").animate({ scrollTop: currentscrollpos }, 0);
});
});
});
});
You are using a local variable because you are using var:
var currentscrollpos = $(window).scrollTop();
Instead, drop the var so that it's accessible inside the .closeme click function. You already used var at the very beginning. So:
currentscrollpos = $(window).scrollTop();
That way, the variable at the very beginning will be set, which can be accessed by both functions. Currently, you are declaring another variable inside the a#testbutton click function, leaving the original variable untouched.
http://jsfiddle.net/pimvdb/CMbBC/2/.
You can use this code to return to the position of the page that is closed from the browser
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var currentposition;
$(document).ready(function(){
$(window).scroll(function(){
var scrollPos = $(document).scrollTop();
console.log("scrollPos:"+scrollPos);
localStorage.setItem("key",scrollPos);
});
currentposition=localStorage.getItem("key");
window.scrollTo(0,currentposition);
alert("currentposition:"+currentposition);
});
</script>

Categories

Resources