I need a jquery function that will scroll the page (from where the user currently is) by 100 pixels. Please note, this function does not scroll from the top, it scrolls from the current position.
so far i have :
<script type="text/javascript">
$(document).ready(function() {
$(window).scrollTop($(window).scrollTop()+100);
});
</script>
It doesn't do anything.
Thanks to #HirstoYankov for partly helping.
Below is the code that fixed it:
<script type="text/javascript">
$(window).load(function () {
$(window).scrollTop($(window).scrollTop()+1);
});
</script>
Its important to use $(window).load and not $(document).ready
Related
I have a working "go to top" button in my forum. I have chosen to go with the following code because it does not change my forum's URL in any way, which is important. Within the head section:
<script>
function scrollWindow() {
var top = document.getElementById('goHere').scrollTop;
window.scrollTo(0, top);
}
</script>
The div within the body I want to go to:
<div id="goHere"></div>
The input:
<input type="image" onclick="scrollWindow()" value="Scroll" class="goTop" src="http://example.com/images/26.png" alt="" />
It functions well and leaves my URL clean. My questions:
Can my JavaScript be edited to allow smooth scrolling to the div ID (and if so, would you please help me with the edits)?
Must I link to an external jQuery file in order to achieve this?
So making it as simple as possible, here it is using JQuery, see fiddle http://jsfiddle.net/aq9ptz0L/2/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#goHere").offset().top
}, 2000);
});
Note in your <head> section add this if you dont already have JQuery:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Add this script instead of your script and working fiddle here Link
!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"object"==typeof module?module.exports=t():e.smoothScroll=t()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var e=function(e){return"HTML"===e.nodeName?-window.pageYOffset:e.getBoundingClientRect().top+window.pageYOffset},t=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},n=function(e,n,o,i){return o>i?n:e+(n-e)*t(o/i)},o=function(t,o,i,r){o=o||500,r=r||window;var u=window.pageYOffset;if("number"==typeof t)var a=parseInt(t);else var a=e(t);var d=Date.now(),f=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=function(){var e=Date.now()-d;r!==window?r.scrollTop=n(u,a,e,o):window.scroll(0,n(u,a,e,o)),e>o?"function"==typeof i&&i(t):f(s)};s()},i=function(e){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash),o(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};return document.addEventListener("DOMContentLoaded",function(){for(var e,t=document.querySelectorAll('a[href^="#"]:not([href="#"])'),n=t.length;e=t[--n];)e.addEventListener("click",i,!1)}),o}});
function scrollWindow() {
var top = document.getElementById('goHere');
window.smoothScroll(top)
}
</script>
Hi I use stickToTop (http://sdbondi.github.io/jquery-sticktotop/) from fixate.it to make an sidebar that will move when you scroll down.
Here is my JSfiddle: http://jsfiddle.net/f6VwP/
Everything there is going just fine..just how I want it, but when I use it in my code program it doesn't work at all.
I think it has something to do how I put the js code in the index.html but I am not sure.
I put this script link in the body:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://sdbondi.github.io/jquery-sticktotop/jquery-sticktotop.js"></script>
My other javascript I made in an apart document called: jquery.stickToTop.js this code is in te head code like this:
<script type="text/javascript" src="js/jquery.stickToTop.js"></script>
The code of the stickToTop.js is:
;(function () {
var navHeight = $('.sticky').outerHeight(true);
$('.js-sticky').stickToTop({ offset: {top: 50}});
})();
So, what do I wrong?
Thanks!
everything is fine in fiddle because it presumes the jQuery.ready function I suppose you have to change your jQuery code to this:
$(function () {
var navHeight = $('.sticky').outerHeight(true);
$('.js-sticky').stickToTop({ offset: {top: 50}});
});
let me know how it goes.
Please refer to this website here. I have used marquee in best seller product. when I will go to over the image in the sense quick view pop will come. if am over on the image means it will stop. but over on the quick view image in the sense it doesn't stop. how I can stop this. please help me it's killing my time.the following code for use this marquee.
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function() {
$(".items").simplyScroll({autoMode: 'bounce'});
});
})(jQuery);
</script>
The Quickshop ID is over the images, including the div items. Just add the same functionality to the quickshop link
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(document).ready(function() {
$(".items, #em_quickshop_handler").simplyScroll({autoMode: 'bounce'});
});
})(jQuery);
</script>
function Scrolldown() {
window.scroll(0,300);
}
How can I use this function (or a similar one) to automatically scroll down when the page loads? (without clicking a link)
Regards,
taylor
Give this a try:
function Scrolldown() {
window.scroll(0,300);
}
window.onload = Scrolldown;
you could include all of your javascript in an event. This will scroll to an element with an id.
<body onload="window.location='#myID';">
You could use window.onload:
window.onload = Scrolldown;
I also want to point out that you could use an HTML anchor to indicate where to scroll to, so you don't have to hard-code the pixel value:
<div id="iWantToScrollHere" name="iWantToScrollHere">
...
</div>
...which would make your Scrolldown function:
function Scrolldown() {
window.location.hash = '#iWantToScrollHere';
}
you could include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
and then wrap your scrolling thing in a document ready function:
$(document).ready(function(){
window.scroll(0,300);
});
then after that you don't need to do anything.
:)
well, another super simple script is here,
<script type="text/javascript">
window.onload = function(e){
window.scrollBy(1,1);
}
it worked best for me.
I am using the following script to scroll to the top of a scrolling DIV when a link is clicked:
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('#disqus_thread').animate({scrollTop: $("#"+id).position().top},3000,'easeOutQuint');
}
</script>
Here's the html for the link:
<div id="commenttext"><img src="files/comment.png" class="imgHoverable"></div>
I would like the textarea that is underneath the DIV that is scrolled to to have the focus added to it after the scroll. I presume this would mean adding code something like this:
$("textarea.placeholder").focus();
But I am not sure how to include this in the above script. I tried adding it as a line at the end of the script, but it didn't work.
Could someone help me out with this?
Thanks,
Nick
function goToByScroll(id){
$('#disqus_thread')
.animate({scrollTop: $("#"+id).position().top},
3000,
'easeOutQuint',
function() { $("textarea.placeholder").focus(); }
);
}
The last argument when passed this way is the complete callback.
Documentation.