I have a large document with numbered anchor tags as shown below. And a textbox to punch the numbers in to go to anchor which uses window.location.hash
I am also using arrow keys to go next or previous anchors. I want to scroll to the anchor so to give some sense of direction.
<a name="1">
some text
<a name="2">
some text
<a name="3">
here is my function
function updatePageNumber()
{
var pagenumber;
pagenumber = document.getElementById('pageNumber').value;
window.location.hash = pagenumber;
}
Jumping to anchor is very ugly and people loose sense of direction in the text. So is there a way to scroll to anchor with JavaScript. I know there are lots of jQuery examples, but I don't know jQuery and couldn't find JavaScript.
Most important reason is I want to see my page number on the address bar!
Add jQuery library.
Use the following script to do a smooth scroll to the target element you want.
jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);
target is the id of the target element and 1000 is the duration of the animation.
Smooth scrolling demo
Creating the Smooth Scroll Effect with JavaScript
Use this code and enjoy
$(document).ready(function(){
$("#btop").hide(); // replace only #btop with your <div id=" ">
$(function(){
$(window).scroll(function(){
if ($(this).scrollTop()>100){
$('#btop').fadeIn(); // replace only #btop with your <div id=" ">
}
else{
$('#btop').fadeOut(); // replace only #btop with your <div id=" ">
}
});
$('#btop a').click(function(){ // replace only #btop with your <div id=" ">
$('body,html').animate({
scrollTop:0
},200); // to speed up scroll replace 200 to 300 or 500
return false;
});
});
});
You may want to check out this tutorial or google for "JS smooth scroll"
There is no built-in smooth scrolling in JavaScript so you would have to implement it yourself -- but why re-invent the wheel if you already have it in jQuery and you probably won't have to add more than two or three lines of code? Just download jQuery and the ScrollTo plugin, add them to your <head> section in a <script> tag and then use this to scroll to an element with a given ID:
$.scrollTo("#my-element-id");
This will scroll to the element whose ID is my-element-id so you have to use the id=... attribute in the anchors and not the name=... attribute.
If you wish to add this behaviour automatically to all your anchors within a given div (or to the entire page), you can use the LocalScroll plugin which makes the entire this as simple as:
$.localScroll();
I know you said that you don't know jQuery, but you are going to want to use it for the scrolling anyways. Here's a simple example of how it could be used.
