After a user preform a certain action, the page reloads and it adds a #someId to the URL so the URL will be something like localhost/panel/mypage.php#someId and as a default action, the browser will jump to an element with the id of someId.
What I would like to do is to catch that using jQuery and then instead of jumping right to the #someId element, jump 100px above it and have the ability to add a smooth scrolling.
Is that possible?
There is this hashchange event of the 'window' Document Object that's exactly what you require to catch this behavior. You can use:
Javascript solution:
window.addEventListener('hashchange', function(){
// smooth scroll code
});
jQuery solution (v1.8+):
jQuery(window).on('hashchange', function(){
// smooth scroll code
});
Note: The hashchange event gets triggered on url hash change (location.hash) on the same page but not from a different page e.g. going from www.example.com/about.html#first to www.example.com/contact.html#second won't trigger the hashchange event.
This should get you started:
var a_hash = window.location.hash;
var offset = $(a_hash).offset();
if(offset.top > 100){
offset.top = offset.top - 100;
}
var body = $("html, body");
body.animate({scrollTop: offset.top}, '500', 'swing', function() {
});
Related
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.
I have smooth scroll JS to link from a menu item to an anchor further down the page.
The problem is that since I have tabs used on my page (which use #tabname) to navigate, it tries to scroll when using them as well.
Is there an easy change I can make to the JS to prevent this from working on tabs?
$(document).ready(function () {
// Add smooth scrolling to all links
$("a").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
You could provide a way for anchor elements to opt out of the scroll behaviour, e.g. filter out anchors with a data-no-scroll attribute:
<a href="#tab1" data-no-scroll>Tab1</a>
$("a").not("[data-no-scroll]").click(function() {
...
});
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.
I have some code that listens to the scrolling of a page and it's responsible for two things, performing the necessary action (which works) when the "page" has changed but also animate the scrollTop to the nearest "page" but in doing so the scroll event is fired so it sequentially crawls through all the "pages" until it reaches the end of the document.
How can I stop animate scrollTop from firing the scroll event? Is it even possible?
"pages" because this is an iPad html page and each 1024x768 view is a "page"
You can find a answer at this post : https://stackoverflow.com/a/1659231/237838
You could make write your own code to set the animation value, and set
a flag indicating that the change comes from an animation.
For example: (Untested)
var scrollAnimating = false
jQuery.fx.step.scrollTop = function(E) {
scrollAnimating = true;
E.elem.scrollTop = E.now;
scrollAnimating = false;
};
$('#gototop').click(function() {
$('body').animate({scrollTop:0},3000);
$(window).scroll(function () {
if (!scrollAnimating)
$('body').stop();
});
return false;
})
Consider the following JS code:
<script type="text/javascript">
$(function() {
// Check if landing on the page with a hash
if (window.location.hash.length) {
$('html,body').animate({scrollTop: 200}, 100);
return false;
}
// Same-page anchors
$('a[href*=#]').click(function() {
// ... find the target based on the div and animate the scrollTop property again
}
});
});
</script>
What it does is first check if landing on a page with an #anchor or if the user is clicking an same-page #anchor and simply animate to the target div with the corresponding id.
The problem is that these 2 work alternatively: if you land on a page with a hash symbol the page will animate to the div ID, but the subsequent same-page links won't be intercepted by the bound 'click' event (I've also tried binding it with live(), no difference)
If you land on the page with a clean URL, the links will work again. What am I doing wrong?
Why do you return false? That does not make any sense, because in a "ready" event handler, there is no default behavior that can be prevented or a DOM tree that will be bubbled up. Plus it prevents the following statements from being executed (specifically the binding of the event handlers to the links).
if (window.location.hash.length) {
$('html,body').animate({scrollTop: 200}, 100);
return false; // <-- remove this line!
}