I am trying to create a super simple Scroll to top button.
It works but it's appending the button to the body every time when i scroll.
I would like to append it only once and fade it in and if you click it you will be scrolled back to the top off the page and it will fadeout.
The functionality is working but its appending it to the page in an loop.
I know it's a simple bug but, I can't figure it out.
My code:
$(window).scroll(function () {
var scrollPosition = $(this).scrollTop();
var to_top = '<a class="back-to-top" href="#"></a>';
if (scrollPosition >= 500) {
$("body").append(to_top);
$('.back-to-top').fadeIn(1600);
} else {
$('.back-to-top').fadeOut(800);
}
$( ".back-to-top" ).on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
});
Well, you're telling it to append the every time the scroll event is fired, so check if it exists first, see if it works out for you.
$(window).scroll(function () {
var scrollPosition = $(this).scrollTop();
var toTops = $('.back-to-top'); // get jQ object once
if (scrollPosition >= 500) {
if (!toTops.length){ // if no elems
// create one
var $to_top = $('<a class="back-to-top" href="#"></a>');
$to_top.on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
// then attach it
$("body").append($to_top);
} else {
// if elems exist, fade them in
toTops.fadeIn(1600);
}
} else {
toTops.fadeOut(800);
}
});
You should create button once and then hide/show it.
jQuery(function($) {
var to_top = $('<a class="back-to-top" href="#"></a>'),
visible = false;
to_top.appendTo('body').hide();
$( ".back-to-top" ).on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$(window).scroll(function () {
if ($(this).scrollTop() >= 500)
if(!visible){
to_top.stop(true,false).fadeIn(1600);
visible = true;
}
else
if(visible){
to_top.stop(true,false).fadeOut(800);
visible = false;
}
});
});
Related
I ran into a problem when creating a scroll for headlines.
I looked at the element code, the code swears at the element "..offset().top"
$(function() {
var header = $("header"),
introH = $("#intro").innerHeight(),
scrollOffset = $(window).scrollTop()
// scroll
checkScroll(scrollOffset)
$(window).on("scroll", function() {
scrollOffset = $(this).scrollTop()
checkScroll(scrollOffset)
})
function checkScroll() {
if (scrollOffset >= introH) {
header.addClass("fixed")
} else {
header.removeClass("fixed")
}
}
// scroll keys
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
var
blockId = $(this).data("scroll"),
blockOffset = $(blockId).offset().top /* This line */
$("html, body").animate({
scrollTop: blockOffset
}, 500)
})
})
enter image description here
I've created a right side menu but when i scrolling down it is not changing the active class to next menu,I've used this code lots of time but this time i'm not getting the result,
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
DEMO
you need to define scrollLink and you can give some animation effect when you click an anchor link by adding a function like this
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
Demo : http://jsfiddle.net/3xmop98u/
I think you are missing var scrollLink = $('.myanimate'); in your code. Adding this line in your DEMO make the code work.
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
var scrollLink = $('.myanimate');
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
$(".myanimate").click(function (){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
});
http://jsfiddle.net/gilbitron/Lt2wH/
it work when i open in chrom browser. but not in my project. am using bootstrap css and js file.
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
Some have answer it in the link Scroll to top button not working in chrome or safari. but not works for me.
Thanks in advance.
You should place your js inside the $(document).ready() function. Like this:
$( document ).ready(function() {
if ($('#back-to-top').length) {
var scrollTrigger = 100, // px
backToTop = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
};
backToTop();
$(window).on('scroll', function () {
backToTop();
});
$('#back-to-top').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
}
});
I found this code for autoscroll a page.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
var myInterval = false;
myInterval = setInterval(AutoScroll, 5000);
function AutoScroll() {
var iScroll = $(window).scrollTop();
iScroll = iScroll + 500;
$('html, body').animate({
scrollTop: iScroll
}, 1000);
}
$(window).scroll(function () {
var iScroll = $(window).scrollTop();
if (iScroll == 0) {
myInterval = setInterval(AutoScroll, 5000);
}
if (iScroll + $(window).height() == $(document).height()) {
clearInterval(myInterval);
setTimeout(function(){ window.location.href = "index.php"; },3000)
}
});
});
});//]]>
</script>
My page looks like this:
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
My goal is to autoscroll from div to div after 20 seconds en after the last div back to top.
My Question is:
How to make it work scrolling from div to div?
I use window.location.href = "index.php" for refreshing the page en start over again. Is there a different way to achieve the same without a refresh? So go back to the top div and refresh the content of the page?
To scroll from div to div, you could define an array of the selectors for each div. Then in your AutoScroll function, get the element at the current index, get the offset from the top of the page for that element, and scroll to that. Then increment the index value.
To scroll to the top of the page, set the index back to 0 when there are no more elements to scroll to
Something like this should work:
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
var myInterval = false;
var index = 0;
var elements = ["#div1","#div2","#div3","#div4","#div5"];
myInterval = setInterval(AutoScroll, 5000);
function AutoScroll() {
$('html, body').animate({
scrollTop: $(elements[index]).offset().top
}, 1000);
if(index < (elements.length - 1)){
index++;
} else {
index = 0;
}
}
});
});
</script>
See this JSFiddle: https://jsfiddle.net/3gb5uLgs/
I added this function
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
2: You can use location.reload();.
You need to add ScrollTop function, and use it when you reach bottom.
$(document).ready(function () {
var myInterval = false;
myInterval = setInterval(AutoScroll, 5000);
function AutoScroll() {
var iScroll = $(window).scrollTop();
iScroll = iScroll + 500;
$('html, body').animate({
scrollTop: iScroll
}, 1000);
}
//The function scroll to 0 position.
function scrollTop()
{
$('html, body').animate({
scrollTop: 0
}, 1000);
}
$(window).scroll(function () {
var iScroll = $(window).scrollTop();
if (iScroll == 0) {
clearInterval(myInterval);
myInterval = setInterval(AutoScroll, 5000);
}
if (iScroll + $(window).height() == $(document).height()) {
clearInterval(myInterval);
//Instead refresh, I just scrolled to top.
setTimeout(scrollTop,5000)
}
});
});
so I got this sticky header that works great the only problem I have is when I press a link and the screen scrolls down it overlaps my content so I need to set a -47px height or something like that so the # it scrolls to get below the menu and not under it.
My code
$(document).ready(function() {
var stickyNavTop = $('.header').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.header').addClass('sticky');
} else {
$('.header').addClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
$(document).ready(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(closenav).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 760 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
Sorry if i'm not clear enough and need to explain it in another way.
Please keep in mind I'm a JS rookie!
Thank you!
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top -47
}, 500, function () {
window.location.hash = href;
});
return false;
});
add this within your $(document).ready(function(){});