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>
Related
Apologies if this has already been asked, but I couldn't find a specific solution.
I am using a set uneditable plugin on my website which uses pages. I cannot edit the code for the plugin. The paged content is towards the bottom of the page that it is displayed on: see here
When the user clicks on the pages, it adds "page/2/" etc to the end of the current URL, but it shows the user the top of the page.
I have added an anchor just before the plugin, but how can I scroll the user to the anchor based on if the URL contains "page/2/" or "page/3/" etc.?
Simply: If the URL contains the word "page", then scroll to #anchor
Thanks!
Got it working, thanks #hangindev
<script type="text/javascript">
if(window.location.href.indexOf("page") > -1) {
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchor').offset().top
}, 1000);
});
})(jQuery);
}
</script>
Maybe this helps
Bottom
<h1 id="bottom">This is the bottom! </h1>
I have the following problem:
I tried to make a smooth, slow scroll to the top when clicking on a link using jQuery. I used the following script:
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
});
On top of the page I have a <h1>-Tag with the id:start, and at the bottom I have a link defined: a href="#start">Back to top</a>
jQuery script included.
Does anybody know why it's not working in my case, but working here?
Thanks for your help!
Your code seems to work fine, when creating code snippets, be sure to include all code (html & javascript)..
please take a look at the jsfiddle i put together for you.
https://jsfiddle.net/gfe3c43u/
HINT: Make sure that you are including the proper libraries wherever you are trying to run this code (note: my jsfiddle is using jquery 2.1.0)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
I have an problem with my JavaScript and I'm not sure how to deal with it.
So I'm using this script:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 700);
return false;
});
});
The script is making a smooth scroll on my page which I think is really cool, so I don't want to delete it.
But my problem is, that I also have a simple gallery slider on my page, but the JavaScript will effect that gallery slider. It scrolls to the top when clicking on a link in href. The code for the gallery slider is:
<div id="images">
<img id="billede1" src="http://i.imgur.com/dL3io.jpg" />
<img id="billede2" src="http://i.imgur.com/qASVX.jpg" />
<img id="billede3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="billede4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
1
2
3
4
</div>
The thing is, I really like the simple code and I'm trying to be better, so I don't want to use some advanced code which I don't understand.
Is is somehow possible to disable the JavaScript not to be working in my div? Or maybe called it something else than the "href"?
I think my "href" is the problem.
So.. Here it is in fiddle:
http://jsfiddle.net/62dsqLff/
and you can see the problem.
Really thanks. I appreciate it :-)
Let me share a fiddle for you JSFIDDLE on this demo I am given new class called .nav for your navbar anchor tags. Then rewrite the script like below.
$('a.nav').click(function () {
alert( $($(this).attr('href')).offset().top);
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 700);
// return false;
});
Use an id for that anchor, instead of a vague "nav a" which will trigger on any a inside your nav element. Also prevent default action if you are using an a as a button. The right way to create your "return top" script, is to target a button. Instead of nav a, create a button, give it an id, and target that id.
I have a set of buttons that are currently just images with different hover effects defined like so:
<img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" />
And what I want to do with them is scroll down to a different div upon clicking them but I am unsure on how to do this. I found a sample piece of code that works in this scenario here http://jsfiddle.net/ryXFt/3/ but my problem is that I don't know how to apply this to my images that I have created.
This is my failed attempt at trying to get it to work:
<script type="text/javascript">
<script>
$("home.PNG").click(function() {
$('html,body').animate({
scrollTop: $(".centre .main .para2").offset().top},
'slow');
});
</script>
However it does not work and I am unsure simply how to get javascript to recognise the image as something to click.
your selector is wrong
<script type="text/javascript">
<script>
$("#myID").click(function() {
$('html,body').animate({
scrollTop: $(".centre .main .para2").offset().top},
'slow');
});
</script>
look at the jquery documentation
You need to add an id property to the image:
<img src='home.PNG' id='homeimg'.....>
And access it like this:
$("#homeimg").click(...
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.