if I have the following JS code:
//Scroll Down button
$(window).scroll(function () {
if ($(this).scrollDown() > 100) {
$('.containerScroll').fadeIn('slow');
} else {
$('.containerScroll').fadeOut('slow');
}
});
$('.containerScroll').click(function () {
$('html, body').animate({
scrollTop: 0
}, 1500, 'easeInOutExpo');
return false;
});
This basically is for the Back-top-button animation where if the user clicks the button, then it brings the user back to the homepage with smooth scrolling. I would like the opposite. Is there a way to modify the above JS code so that when the user clicks the button, it brings the user to whichever page they desire? Right now, this scrolls all the way to the top and brings the user to only the homepage of the website, but how can I make it so it would bring the user to whichever page on the website?
This is what I have in HTML file:
<a href="#about" class="containerScroll">
<div class="first-scroll"></div>
<div class="second-scroll"></div>
</a>
Basically, I would like the user to go in the about section of the page instead of the homepage. Any suggestions on how to achieve this task?
You can set the scrollTop value to the offset of whatever element you want. For example:
$('html, body').scrollTop($('#about').offset().top);
will set scrollTop to the top of the element with id about by getting its offset.
Or you could use animate as you did in your example:
$('html, body').animate({
'scrollTop': $('#about').offset().top
}, 1500);
Fiddle
Fiddle smooth scroll
to top
window.scrollTo({
top: 0,
behavior: 'smooth'
});
to element
const element = getElementById("someElement");
//you can do it by jquery. no matter
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
MDM: scrolIntoView
MDM: scrollTo
Related
I am using a slider on my web page for that i used jQuery Function
to scroll down
jQuery("#downClick").click(function() {
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, "slow");
});
to scroll up
jQuery("#upClick").click(function(){ //Click event to scroll to top ==>> Slider
jQuery('html, body').animate({scrollTop : 0},800);
return false;
});
My page is having too much data to display, so when a person clicks on this buttons either he navigates to bottom or top in once.
Does anybody can suggest me how can i change to something like if i want to scroll up it will scroll up with multiple steps not in once.
$('#upClick').on('click', function() {
var scrollIndex = $(window).scrollTop(); // current page position
$(window).scrollTop(y - 150); // scroll up 150px
}
refer this!
I want to scroll my page 1750px from the top with an animation. I tried the following and it doesn't work.
$('#trailer').click(function() {
event.preventDefault();
//$(window).scrollTop(1750); // I want to animate this.
$(window).animate(
{top: 1750},
200);
return false;
});
You need to use scrollTop instead of top and you have to call animate on the body (or both html and body depending on the browser):
$('html, body').animate({
scrollTop: 1750
}, 200);
Fiddle
i'am trying to make the airbnb.nl effect where a 'how it works' div appears from the top on button click. Then when you scroll down (or click the close button) it disappears again.
When the div is hide after scrolling to 630px the scrollbar shoots up so i've set the scrollbar to 0 at the same time. Problem is that it keeps repeating this 'scrollTop to 0' script when you scroll down further, making it a unwanted loop.
Any suggestions on how to only use this script (scrollTop -> 0) once, while the div is shown? Or maybe even prettier solutions? ;)
This is where it's live: www.energyguards.nl (and i disabled the scrollTop function there for now)
jQuery(document).on('click', '.flip', function(e){
e.preventDefault();
jQuery(".panel").slideToggle("slow");
});
$(window).scroll(function(){
if($(this).scrollTop() > 630) $('.panel').hide();
if($(this).scrollTop() > 630) $(window).scrollTop( 0 );
});
Hope to hear from you guys,
cheers Joeri
Check this DEMO out http://jsfiddle.net/yeyene/46o7chfu/1/
Hope you means like this.
JQUERY
$(document).ready(function () {
// scroll to top and show top content
$('#show_top_bar').on('click',function(){
$('html, body').stop().animate({
scrollTop: 0
}, 300, function() {
$('#top_bar').slideDown(300);
});
});
// hide top content on click close icon
$('#close_top_bar').on('click',function(){
$('#top_bar').slideUp(100);
});
});
$(window).scroll(function() {
// hide top content when scroll position is top of content
if($(this).scrollTop() > $('#content').position().top){
if($('#top_bar').css('display') !== 'none') {
$('#top_bar').slideUp(0);
$('html, body').stop().animate({
scrollTop: 0
}, 0 );
}
}
});
I have a "back to top" button that appears when the user scrolls down the page.
With some help I have managed to implement these functions in the code below:
fade in at certain point after scrolling down, animated scroll back to top and animated scrolling to all href="#" links of the page.
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
var $win = $(window);
$win.scroll(function () {
if ($win.scrollTop() > 300) {
b.fadeIn();
console.log("fadding in")
}
else {
b.fadeOut();
}
});
});
Here is a working exsample: http://jsfiddle.net/q8DUC/8/
My problem is that the button scrolls into the footer of the page...
Basically the "back to top" should stop 30px above the "footer" DIV.
But I can't find a way to accomplish that. I've looked around but haven't found anything that worked with the existing code.
Thanks for any help or suggestions!
UPDATE:
Got a bit further: http://jsfiddle.net/q8DUC/20/
Just don't know how I can avoid the jumping of the button!
Is there a way to stick the button to the bottom instead the top:0???
As always THANKS for every suggestion or help!
I think you could get the location of the footer and add it to your conditional, which checks if the button should be displayed:
// dynamically get the position of the footer
var FOOTER_POSITION = someNumber;
// i THINK something like var FOOTER_POSITION = $('#T4').position().top; could work
if (300 < $win.scrollTop() && $win.scrollTop() < FOOTER_POSITION) {
Sorry, I read your question wrong, since you are using fixed positioning for your button you could implement something like:
get the height of the footer + 30px
Get a location of the footer in relation to the document, based on your fiddle ~2000px (FOOTER_START)
if the location of the top of the window is > 300 AND it is greater than (FOOTER_START) change #back-top bottom property to height of your footer
The code I have scrolls through a sequence of divs, each called .container. Each .container has a 100% height, so the user ends up quite far down the page as a result.
Now I am trying to scroll back to the top (using the same .container class) once the user reaches to the bottom of the page.
$('.down').click(function (e) {
var next_container = $(this)
.next(container);
$('html, body')
.animate({
scrollTop: next_container.offset().top
}, 'slow');
});
Is there way for the jQuery to detect that the user is at the bottom of the document, and as a result, scroll to the first .container (rather than the next)?
You can check that there is a next container found. If not, go to the first one:
$('.down').click(function (e) {
var next_container = $(this).next(container);
if (!next_container.length) {
next_container = $(container).first();
}
$('html, body').animate({
scrollTop: next_container.offset().top
}, 'slow');
});
This is assuming your container variable is a string with the selector of the element, ie. ".container"