I am trying to scroll my page (on click) to the top of en element. The problem here is that my page is to short to scroll to the top of the element. IS this possible?
Here's my code
$('.x-class').on('click', function(e) {
moveWindowTo($('.yclass').eq(0));
});
function moveWindowTo($target) {
$('body,html').animate({ scrollTop: $target.offset().top }, 'slow');
}
This code uses .parent() to scroll up to the top of the containing div:
$('.x-class').on('click', function(e) {
moveWindowTo($(this).eq(0));
});
function moveWindowTo(target) {
$('body,html').animate({
scrollTop: target.parent().offset().top
}, 'slow');
}
Here is a working jsFiddle. Scrolling down and clicking the red box will scroll it to the top of the containing div.
Related
I'm using this function to scroll down the page from one element to another. Everything works fine, except that with this function, it scrolls to halfway down the div, instead of just scrolling to the top of the div. How can I fix this?
jQuery(document).ready(function () {
jQuery('.request-tour-scroll').click(function () {
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, 2000, function () {
jQuery('#show').focus();
});
jQuery('#tour-option-section').css('display', '');
return false;
});
});
Your scrollTop call needs to have the scroll position set to the top of the div you want to scroll to, not the height of the document.
jQuery("html, body").animate({ scrollTop: $('#tour-option-section').offset().top }, 2000, function () {
jQuery('#show').focus();
});
Codepen for example: https://codepen.io/jamiecalder/pen/LYYVqqX
I have a single page website (Squarespace - Pacific template) https://pacific-demo.squarespace.com/?nochrome=false with a Navigation bar at the top that scrolls away with the home-page and appears again once you scroll to the first-section. All the links are anchored to the correspondent section that slides up and stops in line with the Navigation Bar that appears on scroll.
I would like to add a link to the home-page with an arrow that sends you down only to the first-section and aligns this with the appearing navigation bar.
With a simple anchor link the section scrolls to the top of the browser behind the Navbar.
I tried this script (adding one for each media-query I used) and it works, but if I resize the browser, the Navbar disappears, so I'd like to use something different.
if($(window).width() < 1438)
{
$("#arrow-down").click(function() {
$('html,body').animate({
scrollTop: $("#officina-page").offset().top -120},
'slow');
});
}
else if($(window).width() > 1439 && $(window).width() < 1558)
{
$("#arrow-down").click(function() {
$('html,body').animate({
scrollTop: $("#officina-page").offset().top -130},
'slow');
});
}
You can do something like this with the good offset (height of your menu):
if($(window).width() > 1438) {
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
}
i want to do scroll to an element as whatsapp search
when user clicked search (here it is bottom) should scroll to last element
ie; element with id chat-7.
and when click up button should scroll to chat-6 then chat-5 ..and so on.
if click down button it should scroll to down if it is not last item.
function scroll(id){
console.log(id);
$(".container").animate(
{
scrollTop: $("#"+id).offset().top
},
"fast"
);
}
full code here
http://jsfiddle.net/p3kar5bb/231/
unfortunately this code is not working properly
Because your div .container doesn't have scroll bar so you can do two things.
1. Animate Body
$("body").animate({ scrollTop: $("#"+id).parent('.item').offset().top}, "fast");
Demo
2. Set max-height to div
.container{
height: 100%;
overflow-y: scroll;
max-height:200px;
}
Demo
Perform the animate on the body instead of the .container
function scroll(id){
console.log(id);
$("body").animate({ scrollTop: $("#"+id).offset().top}, "fast");
}
Also set the
var pointedPosition=0;
Fiddle http://jsfiddle.net/p3kar5bb/234/
$('html, body').animate({
scrollTop: $("#"+id).offset().top
}, 500);
Code that is given in http://jsfiddle.net/p3kar5bb/231/ is fine, just change the animate() as above.
Just tried – $('html') does not work in Chrome and $('body') does not work in Firefox, so $('html, body') is needed. And also calling .stop() is a good thing.
Assuming you have the element id from buttons click event , try to change the scroll function code to this:
function scroll(id){
$('html, body').animate({
scrollTop: $("#"+id).offset().top
}, 2000);
}
And I have update your code here http://jsfiddle.net/p3kar5bb/231/.
I'm a jQuery novice. I have two functions on the same page:
one which is a smooth scroll to an ID
the other which shows a "back to top" element after the user scrolls a set distance.
The functions work on their own, but when I combine them as shown below, the "back to top" function doesn't work.
I think I'm missing something obvious and could use some help.
Thanks!
Update: This fiddle shows the problem:
back to top jsfiddle
If the smooth scroll block is disabled, the back to top function works.
jQuery(document).ready(function(){
//smooth scrolling
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -150}, 900, 'swing', function () {
window.location.hash = target;});
});
// Show or hide the back to top footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900);
});
});
Hi #DavidCara Just add
<div id="top"></div>
after immediate <body> tag it'll defiantly work.
See updated jsfiddle Here
Use this simple code in html tags directly.
<a onclick="$('html, body').animate({scrollTop: 0}, 900);" href="javascript:;">back to top </a>
i have expandable headings that when clicked, show content.
I use a scrollTo method to scroll to the current clicked div to make sure its always in the screen view without the user scrolling.
However, where i currently use fadeIn / Out it looks messy as items are being faded in / out at the same time the page scrolling.
Is there a way i can only fade in / out the content when the scrollTo Has finished? e.g.:
Currently:
$(document).on('click','.headingHelp',function(){
$('html,body').animate({ scrollTop: $(this).offset().top }, 'slow');
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
However what i want:
function scrollToDiv() {
$('html,body').animate({ scrollTop: $(this).offset().top }, 'slow');
}
$(document).on('click','.headingHelp',function(){
scrollToDiv() {
// ONLY DO THIS ONCE FINISHED SCROLLING
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
}
});
You can use a callback:
$('html,body').animate({scrollTop: $(this).offset().top},'slow',function(){
//all the code you want to execute later goes here
});
If I recall correctly, you can make use of animate's promise:
function scrollToDiv() {
return $('html,body')
.animate({ scrollTop: $(this).offset().top }, 'slow').promise();
}
Use it like this:
scrollToDiv().done(function(){
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});