This is how I include the button in the body:
<?php require_once('scrollToTop.php'); ?>
This is my scroll tTo Top.php file:
<div class="btnScrollToTop" data-scroll="up" type="button">
<img src="images/paudie_scroll_top_icon.jpg" alt="">
This is the CSS for the button:
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
width: 50px;
border: none;
z-index: 99;
}
This is my js file included in php footer as:
<script src="js/scroll.js"></script>
// JavaScript Document
const btnScrollToTop = document.querySelector(".btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
});
I am unable after a variety of attempts to get he button to appear only one the use has scroll 20px from the top of page.
Please help.
To do what you require you can retrieve the current window scroll position, check if it's higher than 20 and use it to toggle the display state of the button:
const btnScrollToTop = document.querySelector(".btnScrollToTop");
// scroll to top of page when button clicked
btnScrollToTop.addEventListener("click", e => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
});
// toggle 'scroll to top' based on scroll position
window.addEventListener('scroll', e => {
btnScrollToTop.style.display = window.scrollY > 20 ? 'block' : 'none';
});
h3 {
margin: 0 0 1000px;
}
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
border: none;
z-index: 99;
display: none;
}
<h3>Scroll down...</h3>
<div class="btnScrollToTop" data-scroll="up" type="button">
<img src="images/paudie_scroll_top_icon.jpg" alt="Scroll to top" />
</div>
CSS:
.btnScrollToTop {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
width: 50px;
border: none;
z-index: 99;
opacity: 0;
}
.btnScrollToTop.active{
opacity: 1;
}
JavaScript:
const btnScrollToTop = document.querySelector(".btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
});
window.addEventListener("scroll", () => {
if (window.pageYOffset > 100) {
btnScrollToTop.classList.add("active");
} else {
btnScrollToTop.classList.remove("active");
}
});
Related
I have the following functions. I want box 3 to move only after box 1 and box 2 have finished moving. Right now, it's moving right away. I assume I would put all the functions under one .click function but I tried a few times and it still does not work.
$(function() {
$("button").click(function() {
$("#box1").animate({
left: $(window).width() - 800
}, {
complete: function() {
$("#box1").hide();
}
});
});
$("button").click(function() {
$("#box2").animate({
left: $(window).width() - 800
}, {
complete: function() { // complete call back
$("#box2").hide(); // can hide or remove this element
},
});
});
$("button").click(function() {
$("#box3").animate({
right: $(window).width() - 200,
top: $(window).height() - 200
});
});
});
#box1,
#box2,
#box3 {
width: 30px;
height: 50px;
position: absolute;
text-align: center;
font-family: Times New Roman;
}
#box1 {
background-color: skyblue;
left: 0px;
top: 50px;
}
#box2 {
background-color: green;
left: 0px;
top: 120px;
}
#box3 {
background-color: black;
left: 100px;
top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> Start </button>
<div id="box1">
<p> BOX 1 </p>
</div>
<div id="box2">
<p> BOX 2 </p>
</div>
<div id="box3">
<p> BOX 3 </p>
</div>
If I understand correctly, I simply smashed the first two click handlers together and moved the animation from the third one into the complete callback on #2.
$(function() {
$("button").click(function() {
$("#box1").animate({
left: $(window).width() - 800
}, {
complete: function() {
$("#box1").hide();
}
});
$("#box2").animate({
left: $(window).width() - 800
}, {
complete: function() { // complete call back
$("#box2").hide(); // can hide or remove this element
$("#box3").animate({
right: $(window).width() - 200,
top: $(window).height() - 200
});
}
});
});
});
#box1,
#box2,
#box3 {
width: 30px;
height: 50px;
position: absolute;
text-align: center;
font-family: Times New Roman;
}
#box1 {
background-color: skyblue;
left: 0px;
top: 50px;
}
#box2 {
background-color: green;
left: 0px;
top: 120px;
}
#box3 {
background-color: black;
left: 100px;
top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> Start </button>
<div id="box1">
<p> BOX 1 </p>
</div>
<div id="box2">
<p> BOX 2 </p>
</div>
<div id="box3">
<p> BOX 3 </p>
</div>
I'm trying to do something like (in js, html, sass) :
when I scroll the page down my layers (ground, sky, space, ...) go down
my content (that will be a rocket going in the sky) stay in the middle of the screen and will move to the sides like if it were to be flying (that will be for later)
some elements will move on the layers (like asteroids going from right to left or something) (for later)
So here are some ideas of code I tried but this seem odd and do not work as intended; as you can see, the layers are scrolling as intended, but they are not all showing for whatever reason, they seem to fill all the page size but they shouldn't and i'm going round and round about this on the internet and no one seem to have done something like this.
// Functions
detectPageVerticalPosition = () => {
pageVerticalPosition = pageYOffset;
};
getDivs = () => {
for (
let div = document.getElementsByTagName("div"), i = 0; i < div.length; i++
) {
div[i].getAttribute("class") == "layer-vertical" &&
layerVerticalArray.push(div[i]);
}
console.log("layerVerticalArray: ", layerVerticalArray);
};
moveLayers = () => {
for (let i = 0; i < layerVerticalArray.length; i++) {
layerVerticalArray[i].style.bottom = -1 * pageVerticalPosition + "px";
}
};
// End Functions
// Variables
var pageVerticalPosition = 0,
layerVerticalArray = new Array();
// End Variables
// Events
window.onload = e => {
getDivs();
// console.log(layerVerticalArray);
};
window.onscroll = e => {
detectPageVerticalPosition();
moveLayers();
};
// End Events
body {
margin: 0;
}
#page {
position: relative;
height: 20000px;
width: 100%;
}
#rocket-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#rocket-container #rocket {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
#background-container {
position: fixed;
height: 100%;
width: 100%;
background-color: red;
overflow: hidden;
}
#background-container .layer-vertical {
width: 100%;
height: 3500px;
}
#background-container #layer-vertical-1 {
position: absolute;
background-color: blue;
}
#background-container #layer-vertical-1 #cloud-1 {
outline-style: dashed;
right: 0px;
}
#background-container #layer-vertical-1 #cloud-2 {
outline-style: dotted;
bottom: 0px;
}
#background-container #layer-vertical-2 {
background-color: green;
}
#background-container #layer-vertical-3 {
background-color: purple;
}
.cloud {
position: absolute;
width: 180px;
height: 120px;
background-image: url(../images/cloud.png);
}
<div class="page">
<div class="background-container">
<div class="layer-vertical" id="layer-vertical-1">
Layer 1
<div class="cloud" id="cloud-1"></div>
<div class="cloud" id="cloud-2"></div>
</div>
<div class="layer-vertical" id="layer-vertical-2">
Layer 2
</div>
<div class="layer-vertical" id="layer-vertical-3">
Layer 3
</div>
</div>
<div id="rocket-container">
<div id="rocket">STAY MIDDLE</div>
</div>
</div>
[1]: https://via.placeholder.com/180/120
So, here's what i found in order to fix this (jsfiddle: http://jsfiddle.net/kjrte2sd/2/)
i used some jquery to make the background-container scroll down as intended instead of each elements scrolling down by himself.
now the page div is gone and the body handle the sizing of the whole thing.
i guess the answer was simpler than i expected it to be.
var winHeight = $(window).innerHeight();
$(document).ready(() => {
$(".layer-vertical").height(winHeight);
$("body").height(winHeight * $(".layer-vertical").length);
});
window.addEventListener("resize", e => {
$(".layer-vertical").height($(window).innerHeight());
});
$(window).on("scroll", () => {
$("#background-container").css("bottom", $(window).scrollTop() * -1);
});
body {
margin: 0;
padding: 0;
}
#rocket-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#rocket-container #rocket {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
#background-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#background-container .layer-vertical {
width: 100%;
}
#background-container .layer-vertical h1 {
width: 100px;
position: relative;
display: block;
margin: 0 auto;
text-align: center;
top: 50%;
}
#background-container #layer-vertical-1 {
background-color: green;
}
#background-container #layer-vertical-2 {
background-color: red;
}
#background-container #layer-vertical-3 {
background-color: white;
}
#background-container #layer-vertical-4 {
background-color: pink;
}
#background-container #layer-vertical-5 {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="background-container">
<div class="layer-vertical" id="layer-vertical-5">
<h1>5</h1>
</div>
<div class="layer-vertical" id="layer-vertical-4">
<h1>4</h1>
</div>
<div class="layer-vertical" id="layer-vertical-3">
<h1>3</h1>
</div>
<div class="layer-vertical" id="layer-vertical-2">
<h1>2</h1>
</div>
<div class="layer-vertical" id="layer-vertical-1">
<h1>1</h1>
</div>
</div>
<div id="rocket-container">
<div id="rocket">STAY MIDDLE</div>
</div>
I have some code which acts as a toggle to open/close an element. I am trying to figure out how to manipulate this so that when one element is clicked - the active one closes.
I have used animation to make the content appear from the right hand side of the page.
Please take a look at the code, I need to access the open callback but not sure how.
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
// cache sliding obj in a var
var tab1 = $('.tab1');
var tab1content = $('.tab1_results');
var tab2 = $('.tab2');
var tab2content = $('.tab2_results');
tab1.clickToggle(function() {
tab1.animate({
'right': '450px'
});
tab1content.animate({
'right': '0'
});
}, function() {
tab1.animate({
'right': '0'
});
tab1content.animate({
'right': '-450px'
});
});
tab2.clickToggle(function() {
tab2.animate({
'right': '450px'
});
tab2content.animate({
'right': '0'
});
}, function() {
tab2.animate({
'right': '0'
});
tab2content.animate({
'right': '-450px'
});
});
.filter {
position: fixed;
right: 0;
z-index: 99;
top: 0;
height: 100%;
}
.tab1_results {
background: #1cb2e7
}
.tab2_results {
background: #1cb2e1;
}
.tab1_results,
.tab2_results {
position: fixed;
width: 450px;
right: -450px;
z-index: 99;
top: 0;
height: 100%;
}
a.tab1 {
background-image: url('http://placehold.it/100x100?text=TAB1');
top: -1px;
z-index: 100;
height: 100px;
width: 100px;
position: absolute;
right: 0;
background-repeat: no-repeat;
margin-top: 0px;
}
a.tab2 {
background-image: url('http://placehold.it/100x100?text=TAB2');
top: 50%;
z-index: 100;
height: 100px;
width: 100px;
position: absolute;
right: 0;
background-repeat: no-repeat;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
<a class="tab1" href="#"></a>
<div class="tab1_results">
tab 1 content
</div>
<a class="tab2" href="#"></a>
<div class="tab2_results">
tab 2 content
</div>
</div>
Don't use jQuery to animate things. Instead, use jQuery to toggle an "active" class, and use CSS transitions to make the active element slide in and the others out.
CSS3 transitions are hardware-accelerated, and overall, that's way less code.
See in Codepen
$(".header").click(function() {
$(this)
.parent()
.toggleClass("active")
.siblings()
.removeClass("active")
})
.filter {
position: absolute;
right: 0;
height: 100%;
}
.filter .tab {
height: 100%;
width: 200px;
background: #add8e6;
border: #808080 solid 1px;
transition: all 0.3s ease-out;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
.filter .tab:nth-child(2) .header {
top: 110px;
}
.filter .tab:nth-child(3) .header {
top: 220px;
}
.filter .tab.active {
transform: translateX(-100%);
z-index: 2;
}
.filter .tab .header {
cursor: pointer;
position: absolute;
left: 0;
top: 0;
background: #d3d3d3;
color: #a9a9a9;
width: 100px;
height: 100px;
transform: translateX(-100%);
}
.filter .tab .header:hover {
outline: #a9a9a9 solid 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
<div class="tab">
<div class="header">Tab 1</div>
<div class="contnet">
tab 1 content
</div>
</div>
<div class="tab">
<div class="header">Tab 2</div>
<div class="contnet">
tab 2 content
</div>
</div>
<div class="tab">
<div class="header">Tab 3</div>
<div class="contnet">
tab 3 content
</div>
</div>
</div>
You could do something like this:
if (tab2.css("right").replace("px","") > 0) {
tab2.trigger("click");
}
demo
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
// cache sliding obj in a var
var tab1 = $('.tab1');
var tab1content = $('.tab1_results');
var tab2 = $('.tab2');
var tab2content = $('.tab2_results');
tab1.clickToggle(function() {
if (tab2.css("right").replace("px","") > 0) {
tab2.trigger("click");
}
tab1.animate({
'right': '450px'
});
tab1content.animate({
'right': '0'
});
}, function() {
tab1.animate({
'right': '0'
});
tab1content.animate({
'right': '-450px'
});
});
tab2.clickToggle(function() {
if (tab1.css("right").replace("px","") > 0) {
tab1.trigger("click");
}
tab2.animate({
'right': '450px'
});
tab2content.animate({
'right': '0'
});
}, function() {
tab2.animate({
'right': '0'
});
tab2content.animate({
'right': '-450px'
});
});
.filter {
position: fixed;
right: 0;
z-index: 99;
top: 0;
height: 100%;
}
.tab1_results {
background: #1cb2e7
}
.tab2_results {
background: #1cb2e1;
}
.tab1_results,
.tab2_results {
position: fixed;
width: 450px;
right: -450px;
z-index: 99;
top: 0;
height: 100%;
}
a.tab1 {
background-image: url('http://placehold.it/100x100?text=TAB1');
top: -1px;
z-index: 100;
height: 100px;
width: 100px;
position: absolute;
right: 0;
background-repeat: no-repeat;
margin-top: 0px;
}
a.tab2 {
background-image: url('http://placehold.it/100x100?text=TAB2');
top: 50%;
z-index: 100;
height: 100px;
width: 100px;
position: absolute;
right: 0;
background-repeat: no-repeat;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
<a class="tab1" href="#"></a>
<div class="tab1_results">
tab 1 content
</div>
<a class="tab2" href="#"></a>
<div class="tab2_results">
tab 2 content
</div>
</div>
I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?
You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
I tried to put together following codes but doesn't work. when i down scroll, page up button appears and when i click it, scroll is to be top of page. When i up the scroll to top of page, page down button appears and when i click it, it does same action with page up scroll.
var amountScrolledTop = 200;
var amountScrolledDown = 50;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolledTop ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
if ( $(window).scrollTop() < amountScrolledDown ) {
$('a.down1').fadeIn('slow');
} else {
$('a.down1').fadeOut('slow');
}
});
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 'slow');
return false;
});
$('a.down1').click(function() {
var objDiv = document.getElementById("mid");
objDiv.scrollTop = objDiv.scrollHeight;
});
.down1{
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 60px;
top: 80px;
background: url("../img/simple_icons/downArrow.png") no-repeat center 43%;
}
.back-to-top{
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: url("../img/simple_icons/upArrow.png") no-repeat center 43%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Down to
Back to Top
.
.
.
<div class="mid"></div>
</body>
Page down button always up the scroll to top of page. Even i erase all the javascript code.
I think this is what you were looking for, I put some comments on the code to describe the modifications I made.
var amountScrolledTop = 200;
var amountScrolledDown = 50;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolledTop ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
if ( $(window).scrollTop() < amountScrolledDown ) {
$('a.down1').fadeIn('slow');
} else {
$('a.down1').fadeOut('slow');
}
});
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 'slow');
return false;
});
$('a.down1').click(function(e) {
//you have to prevent the default action of the link (the default going to the top because of href="#" even if there is no javascript)
e.preventDefault();
//objDiv used to be "null" because it was defined by class not id in html
var objDiv = document.getElementById("mid");
$('html, body').animate({
scrollTop: objDiv.scrollHeight
}, 'slow');
});
.down1{
width: 60px;
height: 60px;
position: fixed;
z-index: 999;
right: 60px;
top: 80px;
background: url("../img/simple_icons/downArrow.png") no-repeat center 43%;
}
.back-to-top{
display: none;
width: 60px;
height: 60px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: url("../img/simple_icons/upArrow.png") no-repeat center 43%;
}
#mid {
height: 2000px;
background-color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Down to
Back to Top
<!-- it was class="mid" -->
<div id="mid"></div>