Develop Reference

ScrollTo on click not scrolling to the correct list item

I have an SVG map and a list where if you click on a plot number on the map it highlights on the list.
As there are quite a few items, when you click on a plot number on the map its supposed to scroll the list on the right to the correct item.
However as you start clicking around on all different numbers you can see the scroll breaks and it no longer scrolls to the correct number.
Codepen here.
JS Code below:
$('.plot__list__item').click(function () {
$(this).toggleClass('selected');
$(this).siblings('li').removeClass('selected');
$('#' + $(this).data('map')).toggleClass('selected');
$('#' + $(this).data('map')).siblings('g').removeClass('selected');
});
$('.plot__map__item').click(function () {
$(this).toggleClass('selected');
$(this).siblings('g').removeClass('selected');
$('#' + $(this).data('list')).toggleClass('selected');
$('#' + $(this).data('list')).siblings('li').removeClass('selected');
});
$('.plot__map__item').click(function () {
let id = $(this).data('list');
let scrollPos = $('#' + id).position().top;
$('.plot__list').animate({
scrollTop: scrollPos
}, 400);
});

The scroll position of the list will keep changing when you scroll it. Which is why you're getting irregular scrollpos. For example, when you initially click the 1 plot, the scrollpos will be 0. But when you scroll the list a bit it changes to a negative number and it will keep changing when you're scrolling the list.
To fix this, Calculate the top of your list and add the list's position to it. Change your click's animate function to:
scrollTop: $('.plot__list').scrollTop() + $('#' + id).position().top
Check codepen here.

You should take in consideration your last scroll position. Try this code:
var currentPosition = 0;
$('.plot__map__item').click(function () {
let id = $(this).data('list');
let scrollPos = $('#' + id).position().top + currentPosition;
currentPosition = scrollPos;
$('.plot__list').animate({
scrollTop: scrollPos
}, 400);
});
However, this solution will not work if you do scrolling without clicking on numbers. In that case you will need to recalculate your current position on scroll event.

how to scroll the div with the help of button click

i have created the div , in that i have some multiple buttons when user wants to scroll down he can click on down arrow button for scrolling up he can click up arrow button , my problem is when we click on arrow buttons scroll takes me end of the div , i want to scroll by pixels how to do it ?
// this is for scrolling down
//Require jQuery
function scrollSmoothToBottom (id) {
var div = document.getElementById(id);
$('#' + id).animate({
scrollTop: div.scrollHeight - div.clientHeight
}, 500);
}
//Require jQuery
function scrollSmoothToTop (id) {
var div = document.getElementById(id);
$('#' + id).animate({
scrollTop: 0
}, 500);
}

I looked over your code and tried googling .animate()
https://api.jquery.com/animate/
and scrollTop
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
and came up with this idea:
function scrollSmoothDown (id) {
var div = document.getElementById(id);
var howManyPixelsToScroll = 5; //change to any number
$('#' + id).animate({
scrollTop: div.scrollTop + howManyPixelsToScroll // not sure about this syntax
}, 500);
}
If my syntax inside the animate method is right, then this would work and the complementary scrollSmoothUp function would just use a negative number instead of a positive number for howManyPixelsToScroll.
(If you had been able to post a working snippet I could have copied that code and tested these changes, but I don't work much with jQuery, so this is just my best guess, not tested.)

add element offset to jQuery offset calculations

I am rather new to jquery and i'm trying to find the right offset for a div element inside the body. I want to make this div element sticky whenever I scroll down and pass the top offset of this element.
I followed this tutorial: https://www.youtube.com/watch?v=utonytGKodc and it works but I have a metaslider in my header and the width/height of this element is left out of the calculations to find the right offset....
the result is that my element becomes a sticky element way to soon, is there a way I can manualy add the sliders coordinates (offset) to the offset calculation of the element i want to make sticky?
var offerteOffset = jQuery(".agendawrap").offset().top //+ metaslider coordinates??;
alert(offerteOffset);
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= offerteOffset) {
jQuery(".agendawrap").addClass("fixed");
} else {
jQuery(".agendawrap").removeClass("fixed");
}
});

I cant believe people make such bad tutorials.
First of all: dont write jQuery all the time. Have a look at this thread.
Basically it says: use an invoking function with an own scope:
(function($) { /* all your jQuery goes here */ })(jQuery);
So you can just type $ instead of jQuery.
To your original question:
(function($) {
$(function() { // document ready...
var scrollTolerance = 50,
agendawrap = $(".agendawrap"),
offerteOffset = agendawrap.offset().top;
$(window).on('scroll', function() {
var scrollPos = $(window).scrollTop();
// OR: if (scrollPos - scrollTolerance >= offerteOffset) {
if (scrollPos + scrollTolerance >= offerteOffset) {
agendawrap.addClass("fixed");
}
else {
agendawrap.removeClass("fixed");
}
});
});
})(jQuery);

Make html element stay in place when scrolled past

How does one make an html element not become fixed until it has been scrolled to? So while the user is scrolling it will be in normal position, but it won't go out of the screen after the user has scrolled past it?

Attach a listener to the onscroll event, and if the scrollTop is greater than the element's Y position, set it to position: fixed.

I've used this code before:
http://www.webdeveloperjuice.com/2011/08/07/how-to-fix-element-position-after-some-scroll-using-jquery/
(function($){
$.fn.scrollFixed = function(params){
params = $.extend( {appearAfterDiv: 0, hideBeforeDiv: 0}, params);
var element = $(this);
if(params.appearAfterDiv)
var distanceTop = element.offset().top + $(params.appearAfterDiv).outerHeight(true) + element.outerHeight(true);
else
var distanceTop = element.offset().top;
if(params.hideBeforeDiv)
var bottom = $(params.hideBeforeDiv).offset().top - element.outerHeight(true) - 10;
else
var bottom = 200000;
$(window).scroll(function(){
if( $(window).scrollTop() > distanceTop && $(window).scrollTop() < bottom )
element.css({'position':'fixed', 'top':'5px'});
else
element.css({'position':'static'});
});
};
})(jQuery);
Then just call the elements:
$(document).ready( function(){
$("#scrollingDiv").scrollFixed({appearAfterDiv:'.sidebar p', hideBeforeDiv:'.footer'});
$("#scrollingDiv1").scrollFixed({hideBeforeDiv:'.footer'});
});

Have a look at the jQuery Scrollfollow plugin. I have used this to achieve that effect conveniently.
You simply call it on the element that you want to stay in view:
<script type="text/javascript">
$( '#example' ).scrollFollow();
</script>
Easing, position and other parameters can be configured.

How to reset to original values?

It looks like it keeps adding a new newHeight and a newDistance each time i click, I am trying to save original height with a global var at the top and using data to do that but i get weird results, basically i should be able to reset newDistance and newHeight to first original values as per before to run the lot with a click but it doesn't and i get new added values each time i click breaking my layout as a result:
talents = $(".talenti");
filter = $(".filtra");
genHeight = $("#container").data($("#container").height());
filter.click(function(e) {
e.preventDefault();
if (talents.hasClass("opened")) {
$(".nasco").slideToggle();
$("#wrapNav").slideToggle("10", "linear");
talents.removeClass('opened');
filter.addClass('opened');
$("#container").css("height", genHeight);
} else {
filter.addClass('opened');
};
if (filter.hasClass("opened")) {
$("#wrapNav").slideToggle("10", "linear", function(){
$("#sliding-navigation").slideToggle();
var newHeight = $("#container").height() + $("#wrapNav").outerHeight(true);
var newDistance = newHeight - $("#container").height() + 22;
$("#container").animate({height: newHeight}, 50,function(){
$(".box").animate({top: newDistance});
});
});
}
});
talents.click(function(e) {
e.preventDefault();
if (filter.hasClass("opened")) {
$("#sliding-navigation").slideToggle();
$("#wrapNav").slideToggle("10", "linear");
filter.removeClass('opened');
talents.addClass('opened');
$("#container").css("height", genHeight);
} else {
talens.addClass('opened');
};
if (talents.hasClass("opened")) {
$("#wrapNav").slideToggle("10", "linear", function(){
$(".nasco").slideToggle();
var newHeight = $("#container").height() + $("#wrapNav").outerHeight(true);
var newDistance = newHeight - $("#container").height() + 156;
$("#container").animate({height: newHeight}, 50,function(){
$(".box").animate({top: newDistance});
});
});
}
});
Anyone?

So, based on the code I could download about 20min ago from your test site, I managed to get it working with the following code:
$(document).ready(function(){
// placeholder to contain the original height...
var original_height = 0;
talents = $(".talenti");
filter = $(".filtra");
filter.click(function(e){
e.preventDefault();
if (filter.hasClass('opened')){
filter.removeClass('opened');
// toggle the wrapping, just with a zero top coordinate...
$("#wrapNav").slideToggle("10", "linear", function(){
$("#sliding-navigation").hide();
$(".box").animate({top: '0px'});
});
// reset to the original height...
$("#container").height(original_height);
}
else {
// get the original height if it's not already set...
if (original_height == 0)
original_height = $("#container").height();
filter.addClass('opened');
if (talents.hasClass("opened"))
{
$(".nasco").hide();
$("#wrapNav").slideToggle();
talents.removeClass('opened');
}
// toggle the wrapping with a height of the nav as top coordinate...
$("#wrapNav").slideToggle("10", "linear", function(){
$("#sliding-navigation").slideToggle(true, function(){
// need the height of the nav before we know how far to move the boxes...
var newHeight = $("#wrapNav").outerHeight(true);
$(".box").animate({top: newHeight});
// set the container's new height, much like you had...
$("#container").height(original_height + newHeight);
});
});
}
});
talents.click(function(e) {
e.preventDefault();
if (talents.hasClass('opened')) {
talents.removeClass('opened');
// toggle the wrapping, just with a zero top coordinate...
$("#wrapNav").slideToggle("10", "linear", function(){
$(".nasco").hide();
$(".box").animate({top: '0px'});
});
// reset to the original height...
$("#container").height(original_height);
}
else {
// get the original height if it's not already set...
if (original_height == 0)
original_height = $("#container").height();
talents.addClass('opened');
if (filter.hasClass("opened"))
{
$("#sliding-navigation").hide();
$("#wrapNav").slideToggle();
filter.removeClass('opened');
}
// toggle the wrapping with a height of the nav as top coordinate...
$("#wrapNav").slideToggle("10", "linear", function(){
// need the height of the nav before we know how far to move the boxes...
$(".nasco").slideToggle(true, function(){
var newHeight = $("#wrapNav").outerHeight(true);
$(".box").animate({top: newHeight});
// set the container's new height, much like you had...
$("#container").height(original_height + newHeight);
});
});
}
});
});
A few points adding food for thought:
I simplified the multiple if statements to make it easier to understand and process
I used hide() to avoid messy animation problems if you clicked on FILTER multiple times in a row
I only adjusted the top coordinates of the boxes to achieve this
I would have preferred to contain the boxes in a more general container, allowing for easier animation and management, but I understand that wordpress doesn't always give you the most room to work, so this should get you on your way!
It might not be completely what you're looking for in your animation, but it's a working example of the code you had and should get you 90% of the way...hope this helps! :)

What about using the data collection of the container element rather than a global variable i.e. at the top record the height
$("#container").data('height', $("#container").height());
then to use
$("#container").data('height');
i.e. to reset the height
$("#container").css({height: $("#container").data('height') });
I feel a bit suspicious about how the global variable is working. Worth a try maybe