I have a site where there is a called .slidingDiv which when the anchor .show_hide is clicked it appears and slides down which is great when it's the only content on the page.
If there is other content above this div it doesn't scroll down and show. Instead it shows the div but it is out of site, so it does actually work but not push the rest of the content up.
Here's the JQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle(), 1000;
scrollTop: $(this).offset().top
});
});
</script>
Many thanks
Pete
Setting scrollTop in the callback of the slideToggle function or after the slideToggle function has been called (as you have did) results in jumpy behavior, at best. If you are looking for a smooth animation it is best to initiate the slide then animate the page to scroll down. This is demonstrated by this fiddle. Here is the js:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
$(".slidingDiv").slideToggle(1000);
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top + $('window').height()
}, 2000);
});
});
Just make a check before scrollTop
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click',function(){
$(".slidingDiv").slideToggle(function(){
if($('.slidingDiv').height() > 0) {
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top
}, 1000);
}
});
});
});
</script>
Related
I'm using the code below and it's slowing down and stopping at a different div.
$("#btn").click(function() {
$('html, body').animate({
scrollTop: $("#footer_1").offset().top
},2000);
});
Even if I use this code:
$("#btn").click(function() {
$('html, body').animate({
scrollTop: $("#footer_1").offset().top
});
});
It goes to the div but there's an offset and when I click "btn" again then it goes to the complete div .
How can I make it work with a smooth scroll?
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 this code so that when a URL is clicked, the view will be scrolled to that particular div (same page) smoothly.
However, I have encountered something buggy.
So let say I clicked the URL, and it is now scrolling smoothly to the bottom of the page. However, when I tried to use my mouse wheel to stop the smooth scrolling but it didn't work. Instead, it gives me that kinda buggy look.
Here's the code
Please advice
<script>
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Add event handlers to the window for wheel and mousewheel events, and in their handlers call $("html, body").stop()
Try this
<script>
$('html, body').bind('mousewheel', function(e){
$(this).stop();
});
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
</script>
Maybe the issue is that you are not using document ready function.
Try this:
<script>
$(document).ready(function () { // <-- this
$('a').click(function(e){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1500);
return false;
});
});
</script>
Her my simple JS code in the head of my XSLT page:
script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var scrollTo = $('#what').get(0);
scrollTo.scrollIntoView();
alert(scrollTo.innerHTML);
</script>
The div Element with the id = "what" is at the bottom of the page. It will not scroll there when I open the page. Why not?
You can simply do this:
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
FIDDLE DEMO
Can anyone show me how to add smooth scrolling (to page top) to this jquery script?
Many thanks.
<script type="text/javascript">
$(function () {
$('#rbSubmit').formValidator({
scope: '#form_register',
onError: function () {
if ($('#input_2 input').hasClass('error-input')) {
$('#r2 div, #r2 input').css('background-color', '#C1272D').css('color', '#FFF');
$("#error-div").show();
} else {
$('#r2 div').css('background-color', '#2F2F2F');
$("#error-div").hide();
}
}
});
});
</script>
Try:
$('html, body').animate({ scrollTop: 0 }, 'slow');
hi Erik why dont u try jquery easing
jquery easing examples