Jquery scrollTo only works once? - javascript

I have a problem with ScrollTo, my problem is that it works fine the first time i click on a link but not after when i click on a diffrent link.
Other information.
The elements i want to scrollto, is first gonna show up when i click a button, then all the elements gets animated and shows up on the page.
See below code
see image
$(document).ready(function ($) {
$("ul.sitecheck-navigation li.seo-optimering-sitechek").click(function (event) {
event.preventDefault();
scrollPageTo($('.meta-sitechek'));
});
$("ul.sitecheck-navigation li.newstuff-sitechek").click(function (event) {
scrollPageTo($('.newstuff-sitechek'));
});
function scrollPageTo($target) {
var scrollHeight = document.body.scrollHeight;
$(window).stop(true).scrollTo($target, {
duration: 600,
progress: function() {
// If the page scroll height changes, scroll afresh to the shifted target
if (scrollHeight !== document.body.scrollHeight) scrollPageTo($target);
}
});
return false;
}
});
It works fine when i click on a link for the first time, it scrolls to my div with the correct class.
But when i click again on a diffrent link, it only scrolls about 10px down when it should go up.
Anybody have any idea how that could be?

Got it solved thanks Frédéric. It was my calling off divs there where wrong after i added .list-result to my scrollto it works :)

Related

jQuery each function not working for scroll top animation

I try to use the jQuery each function for scroll top animation in pagination each click but each function not working well it's working the first time only. Here are the code
$(".wp-pagenavi > a").each(function(i){
$(this).click(function(){
var scroll = $("html, body");
scroll.stop().animate({scrollTop:400}, 500, 'swing', function() { });
console.log("click" + i);
});
});
Please help me to reach out form this issue.
It is quite possible some of the target are loaded after DOM ready event in which case you would have to change your code to:
$(document).on('click', '.wp-pagenavi > a', function() {
var scroll = $("html, body");
scroll.stop().animate({scrollTop:400}, 500, 'swing', function() { });
console.log("click");
});
Have a look at the following simplified fiddle: https://jsfiddle.net/f46dnaue/3/
Is this the behaviour you are experiencing?
In the fiddle, i represents the index of the element being clicked. Clicking either element results in console output on every click.
Regarding your scrolling, should it always scroll to 400? If scroll is defined as 400, it is going to stay 400 no matter the number of clicks - so if you want your page to scroll by 400px steps you need to save the current scrollTop value and add an extra 400 to it for every click.

How to make function work only for one button? Bootstrap-5 scroll to modals bottom

What I want to achieve is to create two buttons:
1: that opens modal window
2: opens same modal and scrolls to bottom
code:
$('#menu-item-6706').on('click', function (){
$('#exampleModal').on('shown.bs.modal', function (event) {
$("#exampleModal .modal-body").animate({ scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")}, 'slow');
});
});
Here is full jsfiddle snippet: https://jsfiddle.net/mkx2auhj/1/
Script is almost working:
If you trigger for the the first time “launch demo modal” it opens modal.
If you trigger “Contact” it opens modal and scrolls to bottom. So it’s correct.
The problem is if you hit “launch demo modal” again it scrolls to bottom again, which is not desirable. I want it to open standard modal like the first time.
Have a bunch of buttons that all trigger the same modal with slightly
different contents? Use event.relatedTarget and HTML data-bs-*
attributes to vary the contents of the modal depending on which button
was clicked. https://getbootstrap.com/docs/5.1/components/modal/#varying-modal-content
Move the 'shown.bs.modal' event listener outside the click event and use event.relatedTarget to detect when the "Contact" button toggles the modal and then animate the modal accordingly. Try this
$('#exampleModal').on('shown.bs.modal', function (event) {
if( $(event.relatedTarget).is('#menu-item-6706') ){
$("#exampleModal .modal-body").animate({
scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")
}, 'slow');
}
});

Jquery hide DIV on input focus, destroyed by window scroll

I have an overlay div that fades in on scroll and out on scroll up. Works fine. My users gets annoyed by this div when entering text in forms, it sometimes hides the send button.
Therefor I try to hide it with JS when input on focus. Works like a charm on desktop but fails bigtime on mobile due to the fact that the keyboard, when popping up, also moves the content. It therefor triggers the scroll event making the visible again.
I wonder how that can be solved in the neatest of ways, any example from my snippet below?
$(window).scroll(function(){
if($(this).scrollTop()>800){
$('.symo').fadeIn()
}else{
$('.symo').fadeOut()
}
});
$('form').delegate(':input', 'focus', function() {
$('.symo').hide();
})
.delegate(':input', 'blur', function() {
$('.symo').show();
});
Here is a working snippet, got rid of the delegate stuff as well.
Thanks!
$(window).scroll(function(){
if($(this).scrollTop()>800 && !$("input,textarea").is(":focus")){
$('.symo').fadeIn()
}else{
$('.symo').fadeOut()
}
});

Prevent HTML Scrolling When scrolling inside element, without hiding scrollbar

I want to prevent scrolling of the body or html when user is scrolling inside the menu. However, I DON'T WANT to set $('html').css('overflow','hidden'); because this makes the entire document shift right. I just want to disable the HTML scroll when scrolling or swiping inside the menu. I tried to search this topic a lot, but nothing I found really worked for me.
FIDDLE
Set this when the menu is open:
var thisHeight = $(window).scrollTop();
$(window).on('scroll', function() {
$('html,body').scrollTop(thisHeight);
});
$('.noScroll').on('touchstart' , function(e) { e.preventDefault(); })
$('.noScroll').on('touchmove' , function(e) { e.preventDefault(); })
And this when it closes:
$(window).off('scroll');
$('.noScroll').off('touchstart');
$('.noScroll').off('touchmove');
$('.noScroll').on('touchstart' , function(){ return true; });
$('.noScroll').on('touchmove' , function(){ return true; });
You need to add a class="noScroll" in the text div for it, check FIDDLE.
iOS solution based on:
How to unbind a listener that is calling event.preventDefault() (using jQuery)?
JSFIDDLE: http://jsfiddle.net/m2ga2ygo/4/.
Uploaded test: https://liebdich.biz/develop/iosMobile.html.

How can I prevent the page from scrolling down when using jQuery UI hide("slide")?

here is my code :
$('#pagelinks > a').click(function () {
$('html,body').animate({ scrollTop: 0 }, 200);
setTimeout(function() {$('#my_div').hide("slide",{direction:"right"},500);},250);
return false;
});
My problem is this : When I click on a link, it scrolls up at the top correctly but then automatically scrolls down ( seems to be around where I clicked ) and hide the content of my_div by sliding it and stay there.
I don't want it to scroll down to where I clicked but rather stay at the top. I tried everything I know but nothing works.
Note that if I put just hide() instead of hide("slide",{direction:"right"},500) there is no scroll down. Plus the scroll down occurs on Firefox and Opera but not in Chromium.
Thanks for your help,
Nolhian
I can think of two options:
1) Don't use a-links with anchors if you don't use the anchor part the way it was ment to.
2) stop the default event from occuring by passing on event to the click function and using preventDefault.
example:
.click(function(e){ e.preventDefault(); });

Categories