I have added the Scroll Back To Top Button in my base (index.html) template and it's working perfectly. But when I go to any other pages, the button won't work.
Can anybody figure out what's wrong?
Here is my index.html go-to-top template, and I put the same code to other page:
<div class="go-top">
<i class="fas fa-chevron-up"></i>
</div>
main.js
$(document).ready(function () {
$(function () {
// Scroll Event
$(window).on("scroll", function () {
var scrolled = $(window).scrollTop();
if (scrolled > 400) $(".go-top").addClass("active");
if (scrolled < 400) $(".go-top").removeClass("active");
});
// Click Event
$(".go-top").on("click", function () {
$("html, body").animate({ scrollTop: "0" }, 500);
});
});
});```
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 have a button on a page , when clicking on it, a scroll down is done , and if I'm on the bottom of the page when clicking on it, it scrolls up.
<style>
.scroll_button {
position: fixed;
right: 35px;
z-index: 100;
}
</style>
<div class="scroll_button" style="bottom: 10px;">
<button id="scroll_id" class="btn btn-primary">
<span> Click to Scroll</span><br><i id="scroll_icon" class="fa fa-chevron-circle-down"></i>
</button>
</div>
<script>
//scroll up and down
$(function () {
$('#scroll_id').click(function (e) {
e.preventDefault();
var $win = $(window);
var scrollTarget = $win.height() + $win.scrollTop() + 1 >= $(document).height() ? 0 : $win.scrollTop() + $win.height()
$("html, body, .modal").animate({
scrollTop: scrollTarget
}, 600);
});
});
</script>
I have a modal in this page and I want to have the same button that scrolls the content of the modal when clicking on that button.
So, I copied the html code the the button and put it to the body of the modal but the page behind the modal was scrolling not the modal's window .
I have added .modal class to the selectors in the script so that modal will be scrolled (I found that in some posts on stackoverflow) but seems to be not working.
Do I miss something in the code ?
How should I proceed? Thanks
When you copied and pasted the code you also copied the id scroll_icon. Id's are unique identifiers that enable you to use CSS or JavaScript to target a specific DOM element. You will need to change the id on your modal and the code associated with it.
$(document).ready(function (e){
$(function () {
$(document).on('click','.scroll_id',function (e) {
e.preventDefault();
var $win = $(window);
var scrollTarget = $win.height() + $win.scrollTop() + 1 >= $(document).height() ? 0 : $win.scrollTop() + $win.height();
if($(this).parent('.modal').length) {
var $scrCont = $(".modal")
}
else {
var $scrCont = $("html, body");
}
$($scrCont).animate({
scrollTop: scrollTarget
}, 600);
});
});
});
You can identify a parent of the button and animate the right component.
If I understand your issue correctly -- https://jsfiddle.net/oerhbwr4/6/
I was exercising in creating a simple Back-To-Top button that activates when scrolling the page after a certain amount. This is the jQuery
$(document).ready(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top-button').fadeIn(200);
} else {
$('.back-to-top-button').fadeOut(200);
}
});
});
/*Scroll Plugin*/
$('.back-to-top-button').click(function(event) {
$('html, body').animate({scrollTop: 0}, 'slow');
event.preventDefault();
});
and this is how I placed it in the HTML
<a href="#" class="back-to-top-button" style="display: inline;">
<i class="fa fa-chevron-circle-up"></i>
</a>
Problem is, it won't scroll up, instead it just jumps on top. I can't find any solution on the web, as it seems it does this only on my site, and everytime I try it on other websites it works.
It now works. I've declared the event handler inside the document ready function
$(document).ready(function () {
var offset = 250;
var duration = 300;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top-button').fadeIn(duration);
} else {
$('.back-to-top-button').fadeOut(duration);
}
});
/*Scroll Plugin*/
$(".back-to-top-button").click(function(event) {
$('html, body').animate({scrollTop: 0}, 'slow');
event.preventDefault();
});
});
I have this 'scroll to top button' that pops up after the user has scrolled down 300px. Everything works fine so far. What I'm trying to do now, is to make this button pop up at a specific element.
Here is the jQuery:
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
Ok, I then changed this line
if ($(this).scrollTop() > 100) {
to
if ($(this).scrollTop() > '.show-button-here') {
but it didn't work. Any ideas what I'm doing wrong?
Here is a fiddle: http://jsfiddle.net/v70L4buk/
You need to get the position of the element from the top of the page and then subtract how far from the top you want that element to get before showing the up arrow. In this case, I am showing the arrow when a link I created in the page gets to 300px from the top. Or you can remove the number and when that element gets to the top of the viewport the function will kick in.
if ($(this).scrollTop() > $('.show').offset().top - 300) {
JSFIDDLE: https://jsfiddle.net/gvpLe06c/1/
I have a button on a page and I want that when it is clicked, the page scrolls to the 0 position.
HTML
<button id="button">Back to top </button>
jquery
$(document).scroll(function(){
var scroll_pos = $(window).scrollTop()
if(scroll_pos > 10){
$('#button').click(function(){
// what code to enter here??
});
}
});
Try this code:
$("#button").on("click", function() {
$("body").scrollTop(0);
});
Method on binds a click event to the button and scrollTop scrolls your body to 0 position.
you can use window function for scrollTop jquery
$("#button").click( function() {
$(window).scrollTop(0);
});
When you click button, this page scroll to top of the position.
Try It
$("#button").click(function() {
$("html").scrollTop(0);
});
or
$("#button").click(function() {
$("html").animate({ scrollTop: 0 }, "slow");
});