My page has a popup window that should enable searches:
The problem is that the popup is located at a scrolled down part of the page, and when reloading the page with the search results the popup is "open" but the entire page begins at the top again since it was a new hit. How do I make the page go directly "halfway" scrolled down so that the results view matches the window? Should I use some kind of anchor?
You have two choices here:
A) Use an anchor. Give an ID to the div that has your searchbox (let's suppose it's searchdiv), and then http://yoursite.com/page.html#searchdiv would automatically scroll to searchdiv. Here's a little demo to elaborate this: little link. (Notice the URL in your browser's location bar).
B) If you want to be a bit more fancy and animate the scroll, use jQuery
var tp = $("#searchdiv").offset().top; //get the element's top
$('html, body').animate({scrollTop: tp}, 500); //animate for 500ms
A little demo of this method: little link.
I hope that helped!
You can use the #tag
so it goes <a name="xyz"></a> at the position to want to display
redirect to
index.php#xyz
Related
I am using jQuery datatable and i want to change it's default behaviour. Right now when I click to page no e.g 61, page-scroll remains at bottom. But when I click page from 61 to 60 page scroll comes at middle of the page. I want to keep all the pages to be scrolled at bottom of page regardless of random page click at bottom from first to last or random page click. I have also taken the reference from this link:
jquery datatables scroll to top when pages clicked from bottom
but this is for making scroll on top by default.
You should target .dataTables_wrapper and attach the event to .paginate_button instead. Here with a nice little animation :
function paginateScroll() {
$('html, body').animate({
scrollTop: $(document).height()
}, 100);
console.log('pagination button clicked'); //remove after test
$(".paginate_button").unbind('click', paginateScroll);
$(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();
Here's the JSfiddle
Disclaimer: I've just made a minor edit in the answer whose link has been posted in the question itself. scrollTop: $(document).height().
Hope this helps.
This issue was happening between second last and last page pagination eg. 60 and 61.when we navigate to the last page and if the number of records are less than the pagination size, then the UI shifts as the datatable adjusts it's height. The issue may be seen when the page is moved from last page to 2nd last page or any other page. So this is a natural behavior and not an issue
Is it possible to change the position of the scroll bar relative to a new hash tag?
Currently, the page scrolls to the top of the element that is targeted using #target, which is normal behaviour. Is there a way to move it so the page scrolls to, for example, 100px further down the page than the anchor tag (adding an extra 100px before the anchor tag)?
Not sure whether cunning placement of the anchor or javascript should be used. Not sure I'm really able to change the position of the anchor so im hoping for a javascript solution.
Thanks
You could combine the answer to this question: On - window.location.hash - Change?
With some extra logic:
$(function(){
var win = $(window); //cache your jq objects!
function fixScrollTop(){
win.scrollTop(win.scrollTop() + 100);
}
if(window.location.hash !== ""){
fixScrollTop();
}
win.bind('hashchange', fixScrollTop);
});
Oh, if you have control over the #anchor in the URL, you can (probably, depending on the browser compatibility you're shooting for) set it to the ID of any element with an ID to make the browser scroll to it.
I have a pagination system like this:
[content]
1 2 3 Next >
when you click on 1/2/3/next the [content] element gets replaced trough ajax.
the problem is that the screen focus moves up if the new height of the [content] is larger than the previous one.
can I force the screen to stay focused where where the pagination links are?
You need to find the position of the element and scroll to that position each time the height changes. Something like:
var p = $(".links").position();
$(window).scrollTop(p.top);
To make the page transparently appear to stay in the same place, you'll need to find out where the links are before you load in the new content.
var before = $(".links").offset().top;
Then after the new content is loaded, get the link's new height.
var after = $(".links").offset().top;
Then do the math to find out how much it's moved.
var difference = after - before
And update your window's scroll location accordingly
$(window).scrollTop( $(window).scrollTop() + difference )
You can probably fix this without jQuery or javascript... Just create a named anchor where you want the top of the page to be after the user clicks the navigation links, put the name of the anchor in the fragment identifier of the nav links, and don't cancel the event so the page navigates to the anchor.
<a name="contentTop"></a>
[content]
Next
I have done the following code in JavaScript to put focus on the particular element (branch1 is a element),
document.location.href="#branch1";
But as I am also using jQuery in my web app, so I want to do the above code in jQuery. I have tried but don't know why its not working,
$("#branch1").focus();
The above jquery (focus()) code is not working for div, whereas If i am trying the same code with textbox, then its working,
Please tell me, how can I put focus on a div elemnt using jQuery?
Thanks!
For my problem this code worked, I had to navigate to an anchor tag on page load :
$(window).scrollTop($('a#captchaAnchor').position().top);
For that matter you can use this on any element, not just an anchor tag.
Like #user293153 I only just discovered this question and it didn't seem to be answered correctly.
His answer was best. But you can also animate to the element as well.
$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);
You can extend jQuery functionalities like this:
jQuery.fn.extend({
scrollToMe: function () {
var x = jQuery(this).offset().top - 100;
jQuery('html,body').animate({scrollTop: x}, 500);
}});
and then:
$('...').scrollToMe();
easy ;-)
Check jQuery.ScrollTo, I think that's the behavior that you want, check the demo.
Check out jquery-scrollintoview.
ScrollTo is fine, but oftentimes you just want to make sure a UI element is visible, not necessarily at the top. ScrollTo doesn't help you with this. From scrollintoview's README:
How does this plugin solve the user experience issue
This plugin scrolls a particular element into view similar to browser
built-in functionality (DOM's scrollIntoView() function), but works
differently (and arguably more user friendly):
it only scrolls to element when element is actually out of view; if element is in view (anywhere in visible document area), no scrolling
will be performed;
it scrolls using animation effects; when scrolling is performed users know exactly they're not redirected anywhere, but actually see
that they're simply moved somewhere else within the same page (as well
as in which direction they moved);
there's always the smallest amount of scrolling being applied; when element is above the visible document area it will be scrolled to the
top of visible area; when element is below the visible are it will be
scrolled to the bottom of visible area; this is the most consistent
way of scrolling - when scrolling would always be to top it sometimes
couldn't scroll an element to top when it was close to the bottom of
scrollable container (thus scrolling would be unpredictable);
when element's size exceeds the size of visible document area its top-left corner is the one that will be scrolled to;
Use
$(window).scrollTop()
It'll scroll the window to the item.
var scrollPos = $("#branch1").offset().top;
$(window).scrollTop(scrollPos);
If you're simply trying to scroll to the specified element, you can use the scrollIntoView method of the Element.
Here's an example :
$target.get(0).scrollIntoView();
I think you might be looking for an "anchor" given the example you have.
This link will jump to the anchor named jump
<a name="jump">This is where the link will jump to</a>
The focus jQuery method does something different from what you're trying to achieve.
For the focus() function to work on the element the div needs to have a tabindex attribute. This is probably not done by default on this type of element as it is not an input field. You can add a tabindex for example at -1 to prevent users who use tab to focus on it. If you use a positive tabindex users will be able to use tab to focus on the div element.
Here an example: http://jsfiddle.net/klodder/gFPQL/
However tabindex is not supported in Safari.
maybe you want to try this simple one
$(document).ready(function() {
$(".to-branch1").click(function() {
$('html, body').animate({
scrollTop: $("#branch1").offset().top
}, 1500);
});
});
I have a HTML page that scrolls up and down (not a lot, but it does scroll). How can I set the scroll position in the page after executing some JavaScript?
I'm using jQuery to inject some additional HTML at the bottom of the page and I'd like to programmatically scroll to the position of that new content after it's added.
Try using window.scroll.
Example:
// put the 100th vertical pixel at the top of the window
<button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>
Another way to do this, so that you have the option:
In the HTML you are adding to the bottom of the page, you can insert a named anchor tag and then change the URL so that the page moves there (FYI: it will not refresh the page).
// add HTML like this, dynamically:
// <a name="moveHere" />
// the javascript to make the page go to that location:
window.location.hash = "moveHere";
Depending on what you are doing, this may or may not be a useful solution.