In my site i am having a list of items where i am using scroll bar to scroll the items.
Now i want to replace that bar with two buttons which working for scroll up and scroll down which can auto hide if there is not any item is available to display.
If is there any plugins are available please do let me know.
scrollTop() can help you here. See the documentation
Example:
$('.scroll-up-button').on('click', function() {
var y = $(window).scrollTop(); // current page position
$(window).scrollTop(y - 150); // scroll up 150px
});
$('.scroll-down-button').on('click', function() {
var y = $(window).scrollTop(); // current page position
$(window).scrollTop(y + 150); // scroll down 150px
});
Obviously this is not a complete solution, but could help you get started in the correct direction.
Use this fiddle
JS:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
HTML:
Scroll To Top
CSS:
.scrollToTop{
width:100px;
height:130px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:75px;
right:40px;
display:none;
}
.scrollToTop:hover{
text-decoration:none;
}
Related
How can I edit this code from W3 schools to make it scroll slower by only using JQuery? It currently just jumps to the top. Is there a way to slow it down so the user can see that they are actually going back up to the top of the page? Ideally the entire thing should be in JQuery if possible.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div>
Edit for Pure jQuery
You're looking for the jQuery .animate() method. Check out:
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2
They're using this.hash to find the destination of the smooth scroll. You can omit it, and replace with '0' for scroll-to-top. If you're new to this.hash, look at:
How does $(this.hash) work?
Add jQuery to your html head with:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
and replace your topFunction with:
function topFunction() {
$('html, body').animate({
scrollTop: 0
}, 500);
}
'500' is the duration of the scroll animation in milliseconds.
You can try using scrollTo with the smooth behavior https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo#examples
Though it doesn't work on Safari (I see it works only from Safari 14 and on now), for safari you need to add a polyfill https://github.com/iamdustan/smoothscroll
Just expand your scrollTop call like that:
window.scrollTo({top: 0, behavior: 'smooth'});
Have a script that showing some div when page scrolling to less than 1400 (<1400), if more than 1400 the div is hiding. But i need that div showing not by height (1400) rather by div id and hiding by "stop" div. Please can you help me.
<style>
#goSale {position:fixed;bottom:-300px;width:auto;height:auto;}
#goSale img {opacity:100;-moz-animation:blink normal 3s infinite ease-in-out;-webkit-animation:blink normal 3s infinite ease-in-out;
-ms-animation:blink normal 3s infinite ease-in-out;animation:blink normal 3s infinite ease-in-out;animation-iteration-count:5;-ms-animation-iteration-count:5;
-webkit-animation-iteration-count:5;-o-animation-iteration-count:5;border:0px;width:100px;height:auto;}
</style>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() < 1400){
$('#goSale').stop().animate({
top: '65px'
}, 1);
}else{
$('#goSale').stop().animate({
top: '-100px'
}, 1); } });
$('#goSale').scroll(function() {
$('html, body').stop().animate({
scrollTop: 0
}, 1, function() {
$('#goSale').stop().animate({
top: '65px'
}, 1); }); }); });
</script>
<div id="goSale"><img src="img/pages/sale.png"></div>
Example: http://www.vichy.ho.ua - top right black cube and other leftside and right side "scrolling" elements, like Youtube and other...
So you want it to be hidden when another particular div is in view. Well, you have to know the position of that div and adapt your scrolled comparison using that number.
So you have to take 3 measurements:
User's screen height
The top position of your "stop div"
The bottom position of your "stop div"
Then, some simple math... And compare with scrolled position.
$(document).ready(function(){
// Get some measurements
var stopPosition = $("#stop").offset().top;
var stopHeight = $("#stop").outerHeight();
var displayHeight = $(window).height();
// Scroll handler
$(window).scroll(function() {
// Show the fixed black image when the stop div is in view
if($(this).scrollTop() < stopPosition-displayHeight || $(this).scrollTop() > stopPosition+stopHeight){
$('#goSale').stop().animate({
top: '65px'
}, 1);
// Else, hide it.
}else{
$('#goSale').stop().animate({
top: '-1000px'
}, 1);
}
});
});
#a,#b,#c{
height:1000px;
}
#a{
background-color:blue;
}
#b{
background-color:orange;
}
#c{
background-color:green;
}
#stop{
height:300px;
border:10px solid red;
}
#goSale{
position:fixed;
top:65px;
right:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a"></div>
<div id="stop">
<h1>The phone number in the black image is not shown when I'm in view.</h1>
</div>
<div id="b"></div>
<div id="c"></div>
<img id="goSale" src="http://www.vichy.ho.ua/img/pages/sale.png">
On a webpage I have multiple sections. In one of this sections I show lots of content blocks. These blocks can be filtered via a panel that floats on the right side.
Currently this floating panel is visible on all the sections of the webpage but I want it to only be visible within the section that I assign it to.
Ideally I would want it to have it stuck in the top right corner of the section on page load. Then when the user gets to the section it needs to keep scrolling with the user until it reaches the end then it needs to stay there.
When the user is finished on the page and scrolls back upwards it needs to do the same as above only in reverse order.
What needs to be done
Make it only visible within the section (assigning a specific section)
Make it stuck in the top right corner on page load
Disallow continuing to the next section after reaching the end of the assigned section.
jsFiddle
https://jsfiddle.net/nfuL86hg/
HTML:
<div id="section-aaa"></div>
<div id="section-bbb">
<div id="content"></div>
<div id="scroller">
Hello<br>
World<br>
</div>
</div>
<div id="section-aaa"></div>
JS:
(function ($) {
$(document).ready(function() {
$(window).scroll(function(){
$("#scroller").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
});
})(jQuery);
CSS:
#section-aaa{
position:relative;
height:500px;
background:red;
}
#section-bbb {
position:relative;
height:1000px;
background:grey;
}
#content {
height:100%;
}
#scroller {
background-color: #fca9a9;
width: 250px;
position: absolute;
top: 50px;
right: 0;
z-index: 1;
}
Thanks everyone for helping.
PS: If you know a better title please post it in the comment area. At the moment I could not think of a better one.
here is one demo
https://jsfiddle.net/nfuL86hg/2/
(function ($) {
$(document).ready(function() {
$(window).scroll(function(e){
if(getIsInArea()){
console.log('animate');
$("#scroller").stop().animate({
"marginTop": ($(window).scrollTop()) + "px",
"marginLeft":($(window).scrollLeft()) + "px"
}, 100 );
}
});
function getIsInArea(){
var w = $(window).scrollTop();
var p = $('#section-bbb').position();
var top = p.top;
var down = top+$('#section-bbb').innerHeight();
if(w>=top && w<=down) {
return true
}
return false;
}
});
})(jQuery);
Expect goes near you need it
Another solution wihtout the animation, in case you want it simpler.
Check it on this JSFiddle.
HTML
<div id="section-aaa"></div>
<div id="section-bbb">
<div id="content"></div>
<div id="scroller">
Hello<br>
World<br>
</div>
</div>
<div id="section-aaa"></div>
CSS
body {
padding: 0;
margin: 0;
}
#section-aaa{
position:relative;
height:500px;
background:red;
}
#section-bbb {
position:relative;
height:1000px;
background:grey;
}
#content {
height:100%;
}
#scroller {
background-color: #fca9a9;
width: 250px;
position: absolute;
top: 50px;
right: 0;
z-index: 1;
}
JavaScript
(function ($) {
$(document).ready(function() {
$(window).scroll(function(){
if ($(window).scrollTop() > $('#section-bbb').offset().top) {
if ($(window).scrollTop() < $('#section-bbb').offset().top + $('#section-bbb').height() - 100 - $('#scroller').height() ){
$('#scroller').css({"position":"fixed", "top":"50px", "bottom":"auto"});
} else {
$('#scroller').css({"position":"absolute", "top":"auto", "bottom":"50px"});
}
} else {
$('#scroller').css({"position":"absolute", "top":"50px", "bottom":""});
}
});
});
})(jQuery);
In Javascript it checks if the scroll top of the window is in the section-bbb div and if it is, it changes the css of the scroller div to have position: fixed. If the scroll top of the window is below the section-bbb div, it changes back the css of the scroller div to have position: absolute and be on the bottom of the section-bbb div (top:auto, bottom:50px). If the scroll top of the window is above the section-bbb div, it changes the css of the scroller div to have position: absolute and be on the top of the section-bbb div (top:50px, bottom:auto).
So i hope my question is clear enought ! I have a div at the top of my page and i'd like that div to move at the bottom when i scroll and hit the end of the page, well i think you get the idea !
If anyone as an idea, i'm taking it ;)
Try to use scroll event with animate() method, and use a flag scroll to make sure the div will be moved just one time :
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
Hope that will give you an idea.
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
html, body { height: 500px; }
#my-div {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100px;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>
You can detect when user scroll to the bottom of the page and then transition top property from 0 to the height of the window minus height of that element.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('div').css({
top: $(window).height() - $('div').height()
});
}
});
CODEPEN
How can I stop relative divs scrolling past a certain point?
Here's a fiddle to help you understand
Basically, I want to be able to scroll as normal, the only difference being is I don't want to see anything behind the header tag, i.e. as it stands when you scroll, you can see the divs through the header tag, I want it so when it scrolls, the cut off point is the bottom of the header tag so when scrolling you won't see anything past the header line.
Hope that makes sense.
Here's the header css
#header {
height:40px;
width:100%;
background:transparent;
position:fixed;
border:1px solid black;
top:0;
}
You could give your header a (non-transparent) background-color, or create a new scroll-area below the header with overflow: scroll/auto
just modify the css for #header as follows :
background: white;
This happens because you have made the background transparent.
for scrolling you can add following jQuery:
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#header').followTo(250);
You use jquery scrollTop for this
$(window).scroll(function(){
if($(window).scrollTop() >= 229){
alert("in if");
$('#header').css({position:'relative'});
}else{
alert("in else");
$('#header').css({position:'fixed'});
}
});
Fiddle