jQuery scrollTop goes to the target then rolls up - javascript

I am using jQuery function scrollTop so when an element with a certain class is clicked your location changes. Here's what I have done:
$(document).ready(function (){
$(".paginacion").click(function() {
$(document).scrollTop( $("#galeria").offset().top );
});
});
I am navigating though a pagination menu which is in the middle of the page and I want to go back to that menu when I use the utility (clicking any element with the pagination class).
When I click any of those elements the page scrolls down for an instant but then scrolls back up.
What's wrong?

The <a> tag has a default href anchoring, which jumps to the target id and changes the URL hash/fragment. Just like #Khanh TO's example on the comment.
But if you are really wanting to handle this with jQuery. A good solution would be to first use preventDefault() which cancels the default execution on click event. Then switch to 'window' instead of 'document' when setting scrollTop. Both are going to have the same effect but $(window).scrollTop(value) is supported by all browsers.
$(".paginacion").click(function(e) {
e.preventDefault();
$(window).scrollTop( $("#galeria").offset().top );
});
If you are also looking to animate the scrolling, you just need to replace $(window).scrollTop() with:
$('html, body').animate({scrollTop: $("#galeria").offset().top});
FireFox and IE places the overflow at the html level so in order for animate(scrollTop) to work cross-browsers we need to include 'html'.
See this jsfiddle.

Related

jQuery hashchange event instantly executes animation with no speed

I am having trouble with jQuery and wrapping my animation inside hashchange event. When event is triggered animation happens instantly. I need it to be smooth.
jQuery( document ).ready(function() {
jQuery(window).on('hashchange', function() {
jQuery('body').animate({ scrollTop: jQuery(window.location.hash).offset().top}, 'slow');
});
});
Everythings is fine if i don't wrap animation inside a hashchange event...
If you're changing a hash to an anchor that exists, it'll automatically jump to that anchor without waiting for the animation. You can see that this happens by just removing your animation since it still jumps. This can be fixed by using hashes in your URL that don't actually have an element with the corresponding id and changing your selector is scrollTop to accommodate for this.
For example, you could change the id of an "about" section to be about-section and continue to use #about as the hash. Then instead of scrollTop: jQuery(window.location.hash).offset().top, you'd use scrollTop: jQuery(window.location.hash + "-section").offset().top to avoid the automatic jump to the element.

Manually trigger a scroll event of DOM element?

I have two independent web elements, if I scroll the content of one element, I also want the 2nd element scroll at same time. Here is an example: https://stackedit.io
I did the following code, but it is not working:
element.find('.fullscreen-mk-content-textarea').on('scroll', function(e){
// first element will trigger this event, then manully trigger the
// the scroll of the 2nd element. It's my plan.
console.log(e); // works
element.find('.right-side').trigger('scroll'); // doesn't work...
});
What shall I do?
Vanilla Javascript
var el = document.querySelector(".right-side");
el.dispatchEvent(new Event('scroll'));
Try this jsFiddle.
$('.e1').scroll(function(e){
$('.e2').scrollTop(parseInt($('.e1').scrollTop()));
});
You can just set the scrollTop value of the other to match. That will cause it to scroll a desired amount. That's how you scroll something. It won't cause it to scroll by trying to trigger a scroll event. A scroll event is an indicator of some scroll motion, not something that causes scroll motion.
If using jQuery, you can use .scrollTop() to retrieve the current value of the scroll or .scrollTop(val) to set the amount of scroll.

Why does jQuery make my page jump back to the top after click?

I have a general question about jQuery.
I have created few jQuery buttons but the problem that I have is when you scroll half way down the page and you press the button, the page jumps back to top, instead of staying in the middle where the button is??
How can you stop this from happening, as it's frustrating for the user??
Is there any particular reason why it's happening?
jsFiddle Example:
$(".comment-here").click(function() {
$(".comment-form").slideToggle('slow');
});
$(".main-btn.orange").click(function(){
$(".comment-form").slideUp('slow');
});
You're not preventing the default event. Since you're clicking on an anchor tag, the default event for # is just to jump up to the top of the document.
To prevent this from occurring:
Pass the event into the function, and use preventDefault();
$(".comment-here").click(function(e){
e.preventDefault();
$(".comment-form").slideToggle('slow');
})
$(".main-btn.orange").click(function(e){
e.preventDefault();
$(".comment-form").slideUp('slow');
})
You could also use return false; instead, which goes a bit further than just preventing the default event, it will stop events bubbling up to parent elements.
Add return false; to the click handler of the <a class="comment-here">.
Essentially it is not jQuery, but the default browser behaviour that causes this: you clicked a link, it has to navigate to its href, which is... "#", i.e. this page. So there we go back to this page (the top).
Prevent default behaviour of anchor tags:
$(".comment-here").click(function(e){
e.preventDefault();
//....
});
The problem is with your <a> tag using href="#" which references the current page and pulls you to the top.
I'd recommend the following approaches, instead of the default event prevention mentioned in other answers. Of course those work, but why use an element only to remove it's default functions?
Ergo, use something that is intended for your purpose:
1.) Use a <button> instead of <a>:
http://jsfiddle.net/RvHjx/7/
2.) If you're dead set on using <a>, remove the href attribute in your <a> tag. This will remove the blue-underlined link styling (the link still functions correctly though), but it's easy to fix with some CSS:
http://jsfiddle.net/RvHjx/11/
Adding javascript:; to your a tags href is the simplest way.
my link

Avoid page back to top after load

I'm using this script
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 2000);
});
});
in order to smooth scroll down when my nav elements are clicked... the problem is that if a link is clicked before page finish loading, when it finishes the page will go back to top again.
I thought event.preventDefault(); was to avoid that. Help please.
you should use the document.onLoad event instead.
document.ready is invoked after all of the HTML is brought down into the document and ready for parsing.
onLoad on the other hand is invoked after all images / resources are loaded into the page as well.
If you wait for this event, then you should have desired results. although they won't have any click functionality until then.
Furthermore, preventDefault does not avoid this. All that does is disable the default action of the element you apply it to. so it prevent's whatever the default action would be for your 'scroll' elements

issue with accordian Jquery script

I wrote accordion script to deploy in mobile website, every thing is working fine. However I am facing one issue when the page length is increasing.
there are about 8 to 10 bars in accordion. when i am scrolling down and clicking any of the item bar to display content, page is moving to top instead of staying at current position where i have clicked.
Please advice me the solution.
below is the script
$('.acc_container').hide();
$('.acc_container1').hide();
$('.acc_trigger').click(function(){
$(this).siblings('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container').slideUp('fast');
$(this).next().siblings('.acc_container').slideDown('fast');
});
On each of your accordion's triggers which display content, which I assume are anchor tags, you need to prevent the default behavior of the event. Which in the case of anchor tags, is to take you too the href attribute of the tag. If the href attribute is set to #, clicking on the anchor tag will take you to the top of the page. So, something like this should work, calling preventDefault() on jQuery's event object, assuming .acc_trigger is the selector for all of your accordian triggers:
$(".acc_trigger").click(function(e) {
$(this).siblings('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container').slideUp('fast');
$(this).next().siblings('.acc_container').slideDown('fast');
e.preventDefault();
});
I am assuming your click might a href click if so
$("a").click(function(event) {
// do all your logic here and add the below link
event.preventDefault();
});
If that is not href
Give your .acc_container class a set height of you need like 500px or so, and an
height:600px;
overflow: hidden;
That should take carek

Categories