I would like to show the button when scroll up. My current script doing this but I have to scroll to the top, and then the button appears. Is there any possible to show the button just shortly after I scrolling up the page?
<script>
function showButton() {
var button = $('#my-button'), //button that scrolls user to top
view = $(window),
timeoutKey = -100;
$(document).on('scroll', function() {
if(timeoutKey) {
window.clearTimeout(timeoutKey);
}
timeoutKey = window.setTimeout(function(){
if (view.scrollTop() > 10) {
button.fadeOut();
}
else {
button.fadeIn();
}
}, 10);
});
}
$('#my-button').on('click', function(){
$('html, body').stop().animate({
scrollTop: 10
}, 10, 'linear');
return false;
});
//call function on document ready
$(function(){
showButton();
});
</script>
You should use offset().top instead of scrollTop()
Related
As described in the title, here's the code. It won't work on the first click after refresh of page.
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
});
function topFunction() {
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
}
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
});
Checkout this,
You had not triggered your topFunction on ready.
$(document).ready(function () {
topFunction();
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
});
function topFunction() {
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>
<button id="myBtn" onclick="topFunction"> ScrolTop </button>
test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
Only had to take out click function outside the other function.
I'm trying to get the above effect. When I click on individual menu items, the active class changes correctly. However, I want to remove all active classes when I scroll the page. In summary, the active class only has to change when clicked, and delete when the user scroll the page
$(document).ready(function() {
$('li').click(function() {
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500)
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
})
$(window).scroll(function() {
$('li').find('a').removeClass('active');
})
})
https://jsfiddle.net/m7pL4y2p/5/
I ended up with this solution which is not optimal but it seems to work
$(document).ready(function() {
$('li').click(function() {
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500).promise().then(function() {
// Animation complete
console.log('complete');
// Need a timeout because this handler is fired before scrollTop reach the final position
window.setTimeout(function() {
$(window).scroll(removeAllActiveClasses);
}, 100);
});
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
});
function removeAllActiveClasses() {
$('li').find('a').removeClass('active');
}
$(window).scroll(removeAllActiveClasses);
});
here is the fiddle
Remove scroll and use wheel method.
I hope the below simplified code helps you.
$(document).ready(function() {
$('li a').click(function(event) {
var offset = $($(this).attr("href")).offset().top;
$('html, body').animate({
scrollTop: offset + 'px'
},500);
$('li a').removeClass('active');
$(this).addClass('active')
event.preventDefault();
});
$(window).on('wheel', function(event){
$('li a').removeClass('active');
});
});
Try changing "window" to "document" just as in:
$(document).scroll(function() {
$('li').find('a').removeClass('active');
})
try to change this
$(window).scroll(function() {
$('ul > li > a').removeClass('active');
})
to this you have to bind scroll
$(window).bind('mousewheel',function() {
$('.active').removeClass('active');
});
Well, so it requires another aprox. The fact is that "annimation" is an asynchronous function, so you need a flag (automScr) that tells the on window scroll program to delete the class or not.
So you put atomScr to true when pressing over menu item, and set to false when the scrolling animation is done.
Keep a look on the "console.logs" messages.
Hope this works!
$(document).ready(function() {
var automScr=false;
$('li').click(function() {
automScr=true;
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500,null,function(){setTimeout(function(){automScr=false;},1)});
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
})
$(document).scroll(function() {
if (!automScr){
console.log ("no automscr");
$('li').find('a').removeClass('active');
}else {
console.log ("automscr");
}
})
})
Here is my Code: Demo
The demo is working fine on manual scrolling for each div to scrolltop.
What I need is: If I click the Auto Start button I want to Auto scroll 1, Auto scroll 2, ... Auto scroll n each div to scrolltop.
$(".jumper").on("click", function() {
var links = $(this).attr('href');
var type = links.substring(links.indexOf('#')+1);
$("body, html").animate({
scrollTop: $('#'+type).offset().top
}, 1500);
});
Each div should reach scrolltop and stop, then go to next div scrolltop with same time interval.
This is how I did it:
$(".autostart").on("click", function() {
scrollToElem($("#auto-scroll"));
var scrollList = $("#auto-scroll").nextAll();
var current = 0;
time = setInterval(function() {
scrollToElem($(scrollList.get(current)));
current++;
if (scrollList.length == current) {
clearInterval(time);
}
}, 2000);
});
Here is the JSFiddle demo
You have error in your code. .top of undefined. You can use links as selector as it contains both idselector + id :
$(".jumper").on("click", function() {
var links = $(this).attr('href');
$("body, html").animate({
scrollTop: $(links).offset().top
}, 1500);
});
I've got this code here:
$(document).ready(function()
{
$("#nav_items > p:first-child").click(function()
{
$('html,body').animate(
{
scrollTop: $('#main_div').offset().top
}, 500);
});
$("#nav_items > p:last-child").click(function()
{
$('html,body').animate(
{
scrollTop: $('#about_us').offset().top
}, 800);
});
});
On element(p) click it scrolls the document to a #main_div or #about_us element. How can I stop it from keep on scrolling if I for example start scrolling with my mouse wheel?
You can listen to the mousewheel event and use the stop method:
$(window).on('mousewheel', function() {
$('body, html').stop();
});
Here is a method, combining the use of $(window).scroll() and $('body').on('mousewheel'), that will demonstrate how to do what you wish:
jsFiddle Demo
var scrollPause = 0;
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
scrollPause = 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300, function(){
setTimeout(function(){
scrollPause = 0;
},5000);
});
e.preventDefault();
});
$('body').on({
'mousewheel': function(e) {
if (scrollPause == 0) return;
e.preventDefault();
e.stopPropagation();
}
})
Notes:
In the jsFiddle, the sp div is used to visually show status of the scrollPause variable
Upon clicking a top menu item, the scrollPause is set to 0 (disallow scroll) and a setTimeout is used to re-enable it after an 8-second pause. Therefore, immediately after the scroll-to-element, mouse wheel scroll will be disabled for 8 seconds.
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#content').hide();
// toggles the content when you click the right link
$('#togglebutton').click(function() {
if ( $(this).hasClass("active"))
{
$('#content').slideDown(200);
$(this).removeClass("active");
$("#toggleimg").attr("src", "images/less.png"); //swap the image
var destination = $("#bottombar").offset().top;
//alert(destination);
//$("html,body").animate({ scrollTop: destination},"slow");
$('html, body').delay('200').animate({
scrollTop: $('#bottombar').offset().top + 111
}, 200);
} else {
$(this).addClass("active");
$("#toggleimg").attr("src", "images/more.png"); //swap the image
$('#content').slideUp(200);
}
event.preventDefault();
return false;
});
});
You can see it in action here www.graysonearle.com/Lumarca
I've tried for hours to get this to work...
I just want the browser window to allow the user to scroll after the div has slid down.