I used the following function to scroll my document to specific point when user tries to scroll on the page. For this I used following code:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$("html, body").animate({scrollTop: 700}, 500);
return false;
}
});
I want to know if there are event listeners for the mousewheel actions or not. When using this I can not actually scroll back up to the top of the document, because the scroll of mouse re-invokes the function and it pulls down the document again.
Also, if there is an alternative way, please let me know.
Can I do this using CSS only for cases where JS may be disabled by the user/client?
EDIT:
After your short explanation I (hopefully) understand what do you want.
I made a function with position states:
header, content, unresolved
and I reused your scrolling function with state condition.
(function() {
var pagePosition = "header";
$(window).scroll(function(){
if ($(this).scrollTop() > 0 && pagePosition == "header") {
pagePosition = "unresolved";
$("html, body").animate({scrollTop: 700}, 500, function() {
pagePosition = "content";
});
return false;
} else if ($(this).scrollTop() < 700 && pagePosition == "content") {
pagePosition = "unresolved";
$("html, body").animate({scrollTop: 0}, 500, function() {
pagePosition = "header";
});
return false;
}
});
})();
Related
This is a #id link to one page:
This is the #id link to another:
I have WP Rocket Installed, have tried to disable the JS settings but it didn't work either.
I am a novice so your advise is much appreciated.
// PAGE SCROLLER
// PUSHES ANCHOR BELOW DEPTH OF NAVBAR
(function($){
$(document).ready(function () {
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
function scroll_if_anchor(href) {
href = typeof(href) == "string" ? href : $(this).attr("href");
if (screen.width <= 320) {
var fromTop = 120;
} else if (screen.width <= 768) {
var fromTop = 124;
} else {
var fromTop = 90;
}
// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
// Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
if(href.indexOf("#") == 0) {
var $target = $(href);
// Older browser without pushState might flicker here, as they momentarily
// jump to the wrong position (IE < 10)
if($target.length) {
$('html, body').animate({ scrollTop: $target.offset().top - fromTop });
if(history && "pushState" in history) {
history.pushState({}, document.title, window.location.pathname + href);
return false;
}
}
}
}
// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);
// Intercept all anchor clicks
$("body").on("click", "a", scroll_if_anchor);
});
})(jQuery);
First you need to check the error $ is not a function (https://prnt.sc/12ald0n) and need to solve it. For better example you can take reference from here https://api.jquery.com/scrolltop/ to scroll top functionality.
I have a working script which adds a class to the body after scrolling 80px.
This works but I need it to work too after having already scrolled and then refreshing the page.
So maybe replace the scroll part by position?
// fixed header
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("body").addClass('fixed');
} else {
$("body").removeClass("fixed");
}
});
});
$(window).scroll will only fire once a scroll event occurs. If you want to check for the scroll position when the page loads, you should do this outside of the $(window).scroll callback, like this:
function updateScroll() {
if ($(window).scrollTop() >= 80) {
$("body").addClass('fixed');
} else {
$("body").removeClass("fixed");
}
}
$(function() {
$(window).scroll(updateScroll);
updateScroll();
});
you're right. you need to check the event and the initial value:
window.addEventListener('load', function() {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("body").addClass('fixed');
}
//no removing needed cause refresh did it
});
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.querySelector(".fixed-top").classList.add("headerFix");
} else {
document.querySelector(".fixed-top").classList.remove("headerFix");
}
}
I have a jQuery scroll function set up, that when the user scroll beyond 94px the .fixed-header-wrap fades in and there's a class change etc too. This function isn't working on IE browsers though, and the .fixed-header-wrap is showing on document load and not fading out / in etc. My markup below:
//Header Colour Scroll Function
var scroller = true;
$(window).scroll(function () {
if ($(".sector-menu").css('display') == 'none') {
if ($(this).scrollTop() > 94 && scroller) {
$('.fixed-header-wrap').addClass('header-shadow');
$(".fixed-header-wrap").fadeIn('fast');
$('.header-logo').fadeIn('slow');
$('.header-wrap').addClass('header-blue');
scroller = false;
} else if ($(this).scrollTop() < 94 && !scroller) {
$(".fixed-header-wrap").removeClass('header-shadow');
$(".fixed-header-wrap").fadeOut('fast');
$('.header-logo').fadeOut('fast');
$('.header-wrap').removeClass('header-blue');
scroller = true;
}
} else {
if ($(this).scrollTop() > 94 && scroller) {
$('.fixed-header-wrap').addClass('header-shadow');
$(".fixed-header-wrap").fadeIn('fast');
$('.header-wrap').addClass('header-blue');
scroller = false;
} else if ($(this).scrollTop() < 94 && !scroller) {
$(".fixed-header-wrap").removeClass('header-shadow');
$(".fixed-header-wrap").fadeOut('fast');
scroller = true;
}
}
});
Is there any reason for this or changes that can be made to make the desired effect work across all browsers?
Try changing $(window).scroll() to $('html,body').scroll(). It worked for me in a previous project... Let me know if it works.
Want to recognize if the user scrolls up or down with this snippet
$('#songs-ul').bind('mousewheel', function(e){
if(scrolling != 1){
alert($("#songs-ul").scrollTop());
if($("#songs-ul").scrollTop() > scrollheight){_runter();}
if($("#songs-ul").scrollTop() < scrollheight){_rauf();}
//scrollheight = $("#songs-ul").scrollTop();
}
});
But if the user scrolls "one time", it is no change - just at a second scroll it changes.
For a preview: http://www.limesoft-solutions.com/jukebox/index.php?list=1&yt=1
(it's the song list under the search field with "Suchen" text)
Has anybody a tip for it? :)
Thanks!
You can use something like this to determine if the user is scrolling up or down:
(function () {
var previousScroll = 0;
$('#songs-ul').scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
alert('Im scrolling down');
//add your code here
}
else {
alert('Im scrollign up');
//add your code here
}
previousScroll = currentScroll;
});
}());
Here is an Example Fiddle
I'm creating magento shop and i want to make toTop button available after user scrolls the window.
I paste mine code bellow, it works fine, but after window is on top, i can't move it anymore, it's stuck.
jQuery(window).scroll(function() {
var top = jQuery(window).scrollTop();
if (top > 77) {
jQuery(function() {
jQuery('img.arrowup').fadeIn();
jQuery('div.header_bg').show();
jQuery('div.mainmenu').addClass('stick');
jQuery('body div.header-container').next().addClass('pad');
jQuery("img.arrowup").on('click', function(e) {
e.preventDefault();
jQuery('body,html').animate({scrollTop:10},800);
});
})} else {
jQuery('div.header_bg').hide();
jQuery('img.arrowup').fadeOut();
jQuery('body div.header-container').next().removeClass('pad');
jQuery('div.mainmenu').removeClass('stick');
}
});
============================
Thanks everybody for help, here's working solution with stick header and toTop animation :)
var scrollDiv=jQuery(this);
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop()<="77"){
jQuery("img.arrowup").fadeOut("slow");
jQuery('div.header_bg').hide();
jQuery('div.mainmenu').removeClass('stick');
} else {
jQuery("img.arrowup").fadeIn("slow");
jQuery('div.header_bg').show();
jQuery('div.mainmenu').addClass('stick');
}
});
jQuery("img.arrowup").click(function(){
jQuery("html, body").animate({scrollTop:0},"slow");
});
I suggest to read this answer first for understanding why animations creates conflict depends on scroll value, than give it a try to this:
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop(); // use this instead of window
if ( scrollVal >= 0 && scrollVal < 77 ) {
//do something without animations
$('div.header_bg').hide();
$('div.mainmenu').removeClass('stick');
} else if ( scrollVal === 77 ){
//i didn't try this before but it may work,
//since value equals 77 once, it may not create animation conflicts
$('img.arrowup').fadeIn();
} else if ( scrollVal > 77 ) {
//do something without animations
$('div.header_bg').show();
$('div.mainmenu').addClass('stick');
}
});
});