When the user clicks a button, I want his browser to automatically scroll to an <a> with a certain href (let's call it "abc"). Ideally the scrolling would be nicely animated in some way.
Give a look to the jQuery.scrollTo plugin.
With that plugin you could simply:
$.scrollTo('a[href=abc]');
Way simpler:
element_to_scroll_to = document.getElementById('anchorName2');
element_to_scroll_to.scrollIntoView();
Even no need for jQuery ;)
You don't need any plugin.
$(document.documentElement).animate({
scrollTop: $('a#abc').offset().top
});
Related
Greetings I'm working on a gallery script and would like to have it so when the page is loaded it is automatically positioned to the top of an anchor I have set. I've tried this code:
<script>location.href = "#trendnav";</script>
<a name="trendnav"></a>
And it doesn't seem to do anything. The more instantaneous this seems to the user, the better.
Try
window.location.hash = "#VALUE";
Fiddle Demo 1
Fiddle Demo 2
or
window.scrollTo
Or, using your original approach:
$('span#godown').click(function(){location='#anchor';});
See here http://jsfiddle.net/dxNKG/1/
. I assigned a clickable span with the task of being the button that triggers it.
Actually, your original syntax location.href='#anchor' is correct, but you should fire it only after the DOM has loaded completely. So, either put the <script> section at the end of your page or do something like
window.onload=function(){window.location.href='#anchor';};
see here http://jsfiddle.net/bUaTT/ (without jQuery)
or, since you are using jQuery:
$(function(){window.location.href='#anchor';})
How would I go about putting a link on a page that changes the url, but doesn't change the page without using hash states?
I want to put links that change the url and scroll to a corresponding section of the page. I don't want to use hashes as they just jump to the section instead of scrolling, and I think hashes dont look very good in the url.
Take a look at HTML5 Push State
There is no other way as far as I know.
Have you tried the jQuery ScrollTo plugin? http://archive.plugins.jquery.com/project/ScrollTo
Browsers now have security features that ensure that the URL displayed in the location bar matches what's actually being displayed. You can't change the location without changing the page at the same time.
However, you can scroll the page anywhere you like without changing the URL. To scroll to a particular element, get its position and use .animate():
$('body').animate({scrollTop: $('#element').position().top});
Combine this with an .on('click',...) handler that uses e.preventDefault() to cancel the URL change and you're good to go.
$('a[href^=#]').on('click', function(e) { // apply to all hash links
var el = $(this).attr('href'); // get the href
e.preventDefault(); // cancel default click action
$('body').animate({
scrollTop: $(el).position().top // scroll to the href ID instead
});
});
http://jsfiddle.net/mblase75/WFKUE/
HTML5 browser history (aka PushState) is the modern approach
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
It is fairly widely supported in browsers
http://caniuse.com/history
Sometimes it makes sense to have a link within a fancybox to launch another fancybox (or load content within the current one).
Say, you have a fancybox error message on login. You also have a "email me my password" widget that works via a fancybox. You may want to combine the two to say (in a fancybox):
Bad password!
Forgot my password!
Unfortunately, this will not work. I considered adding the following js:
$('#fancybox-content a').live('click', function(){
$(this).fancybox();
});
Surprisingly, this sort of worked: You have to click on the link twice and then the right thing happens. Ugh.
Finally, I found a hacky ugly work-around (it works!):
$('#fancybox-content a').live('click', function(){
var href = $(this).attr('href'); //assume there is a selector inside href
$.fancybox($(href).html()); //find the html manually and load
});
What is the right way to accomplish this?
This is i how i solved this problem in my projects:
$('a.fancybox').live("click",function(event) {
event.preventDefault();
var href = $(this).attr('href');
$.fancybox({href: href})
});
In this way you can add fancybox to any current un future A elements with .fancybox class so you don't have to define new events after opening fancybox.
Version 2 is already using "live", so using class names - `$(".fancybox").fancybox();' - would also work on elements loaded using ajax
You should be telling elements to open a Fancybox from within your plugin.
Somewhere you have the following ->
$(document).ready(function(){
$("#my_element").fancybox();
});
That's a very basic function to open a Fancybox, and not only that, but it will also what to open based on the href of the element. You don't need to do any leg work here.
So if you have ->
Forgot my password!
Simply add an ID, such as 'x' for simplicity ->
<a id="x" href="#forgot-password">Forgot my password!</a>
Then, enable the Fancybox plugin for this element.
$(document).ready(function(){
$("#my_element").fancybox();
//this is for our new container to fire
$("#x").fancybox();
});
That should be all you need.
Is there a way to push the browser back to the top of the page when a link is clicked? I am dynamically changing some content but the project needs the user to start at the top of the page when the new content is loaded.
I am already using the url hash tag to keep track of the history. Just looking for some type of javascript function to do this.
What you probably want is scroll(0,0).
As a link:
back to the top
Or just the javascript itself (integrated in a function):
function onContentLoad() {
scroll(0,0);
}
For further reference:
http://developer.mozilla.org/en/window.scroll
http://msdn.microsoft.com/en-us/library/
inflagranti's answer is right about the way to do it using javascript.
If you use jQuery you can also animate the scroll to top action.
$('html, body').animate({scrollTop:0}, 'slow');
You could create an anchor at the top of the page wether it contain text or not.
Then on your link have to refer to the anchor.
Example:
Create an anchor:
<a name="tips">Useful Tips Section</a>
or
<a name="top"></a>
Then create a link to said anchor:
Visit the Useful Tips Section
or
Go to top.
Ta da.
I have a anchor tag that when you click on the "Up to the Top", it will move the web page to the top of the page. My anchor tag is #PAGETOP.
My question is, I am using the jQuery UI Dialog and basically would like to programmatically activate this #PAGETOP anchor so whenever the page always loads at startup, would like to ensure that the page moves immediately to the top of the page.
I would like to emulate the way stackoverflow moves to the top of all your questions when you paginate to the next page (if possible).
Thanks.
To move to the 'PAGETOP' anchor in Javascript, use this:
location.hash = 'PAGETOP';
If you're wanting to do it on page load, in jQuery it'd be like this:
$(function() {
location.hash = 'PAGETOP';
});
Or take #Kip's idea and go pro with the scrollTo jQuery plugin. This plugin has additional options for different animations etc
<script>
$.scrollTo( "#PAGETOP", 1000 );
</script>