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.
Related
My site has a div where content is loaded using the Ajax load method. When any of several links on the home page is clicked, another div on that page is loaded with the content from the selected url. Here's the div:
<div class="main_text">
<div id="C2"><span style="color:black">MTX</span></div>
</div>
Here's the script:
<script>
function ShowAjax(type) {
var filename = "text_" + type + ".htm"
$( "#C2" ).hide().load( filename ).fadeIn(500);
}
</script>
The problem is when I load a new page into a div using the AJAX script shown above, the new page doesn't always load at the top if I had scrolled down on a different page before loading the new page.
I would like the new content to load at the top of the div, not somewhere farther down the page.
I have tried two things so far. The first one is calling scrollTop right after the load:
$(" #C2 ").scrollTop();
The second one is a script at the top of each page to fire on document ready:
<script>
$(document).ready(function(){
$(this).scrollTop(0);
window.scroll(0,0);
console.log("ready to scroll top");
});
</script>
The console.log shows in the dev console, but it doesn't scroll to the top or start at the top.
How can I get the pages to load with the Ajax load method and always appear at the top of the div, with the first line of the text showing instead of starting somewhere down the text (for example, starting on paragraph 3)? Or alternatively how can I force it to scroll to the top after page load?
First, you appear to be using scrollTop wrong. Scrolltop with no argument tells you WHERE the scrollbar is on the element, if there is one. Scrolltop with an argument of a height sets the scrollbar. So $("#C2").scrollTop() would probably return 0 since the element probably has no scrollbar. And since you never use the value, it wouldn't do anything. You also probably want to change the scrollbar of the entire document. In reality you would need something like this:
$(document).scrollTop( $(target).offset().top );
Here is an example in jsbin. Scroll down to the bottom to see the buttons to click, and then it will bring the document scroll to bring the target element to the top of the viewport.
offset returns an object with top and left properties. Giving the position of the element relative to the document. .position gives the position relative to the parent. Using that top number, you can then use that in scrollTop to change the position of the document.
scrollTop then takes that number (the top position of the element) and scrolls the document (or other element) to that position.
It also sounds to me like you are trying to make the element at the top of the page receive the content, regardless of which div was clicked?
If that's the case, then either directly select that element
$('#topElement').hide().load( filename ).fadeIn(500);
Or use one of the actual ajax methods that load is the shortcut for, and target that element in the success callback
$.ajax({
url: filename,
success: function( response ){
$("#topElement").hide().html(response).fadeIn(500);
}
)
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
We needed a footer toolbar that stays at the bottom of the page, and sticks to some area when page is scrolled below that area.
We did achieved this using following script:
fixed div on bottom of page that stops in given place
But there is an issue on some page where the footer toolbar just disappears from the page, and then appear again when page is scrolled down further.
We found that this particular issue appears only on few page, when the page has some contents like Images, Video, or Ajax load other content where the content is filled in (or space is being filled) after page has loaded.
I have no clue how to fix this.
Here is the link from live site with problem page.
http://www.sandiegopchelp.com/services/cellphone-repair/htc/
http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/
http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one/
It is usually more visible on blog posts with many comments. May be due to Disqus comments being loaded after the page has loaded completely.
How does this look?
http://jsfiddle.net/LukeGT/NxSc3/
$(window).scroll(function() {
$('#bar').css('position', 'static');
console.log($('#bar').position().top);
console.log($(window).scrollTop() + $(window).height());
if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
$('#bar').css('position', 'fixed');
}
});
setTimeout(function() {
$('#extra').show();
}, 1000);
I simulated the late loading of images by just showing a few extra divs after 1 second. I believe the problem arises from the fact that the height of the page changes after the code for the bar runs, so it's behaving as it should if the page were shorter (without the images/ajax etc).
What I do instead is position the bar in it's place at the bottom of the page each time the page is scrolled, calculate its height from the top there, and compare this with the scroll height. If we're too far up, it positions the bar in a fixed position at the base of the page, and otherwise leaves it alone. It works smoothly in Chrome, but I haven't tested elsewhere.
I guess this is a problem with the $(window).height() function. Check here. For all the dynamic contents like Images, Video or Ajax-loaded content the height is not added to the result of $(window).height() unless it is specified somewhere in the HTML or CSS (and from the referred link I see this happens only in Chrome. You might want to confirm on this though). To those dynamic contents you can either try adding the height attribute in html or height attribute in the corresponding style.
This is not the answer but i have found something while inspecting your website...
This is you actual HTML when its working fine as you want..
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: fixed; ">
but when it is not working, the Position attribute is changing from Fixed to Relative .
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: relative; ">
you can check you script for that or post you script here...
At initial state, your div is in position: relative so its offset is based on the container element, not on the total height of the page. The variable stickyOffset is set based on that relative offset, that is why it gets clip down sooner than expected while scrolling and also why it works in your JSFiddle as the container there is the page (Iframe) itself.
In your $(document).ready function, you'll need to add the offset of not only the footer but also the rest of the offset on top of the containing element so that the offset is based on the total page instead of the containing div.
Hope that helps.
By looking at your example on http://www.sandiegopchelp.com/services/cellphone-repair/htc/ using chrome, I can see that your footer disappears when it gets at the "related links" section. At this moment, you set the position of the footer to "relative" so it will replace it in the regular flow of the document and its position is actually below the "related links" section which is why it disappears off screen (below "related links").
but you calculated the position at which it should become relative on page load only where you should have recalculated it after having added the "related links" section as it changes the page height (I understood that you added afterward, am I right?).
Try adding a zero height div just above the position of the sticky div, which will remain at that position as the page resizes, then check that position as you scroll to determine the position where the sticky div should stop.
Finally got it fixed by two techniques, setting explicit height wherever possible using CSS and delaying jQuery function after all images are loaded. Refer this: Delay some jQuery function until all images are loaded completely
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 several divs with content. Some of the context is wrapped with,
content <a name='SomeName'> cool content </a> more content
In Javascript how do I force the SomeName name to scroll into view for that DIV only. The catch is that there are many DIVs on the page with content.
I have the Div's object known. The Div can contain other divs etc in a hierarchy. Somewhere in there is the SomeName anchor.
site: http://BiblePro.BibleOcean.com
what about scrollintoview command? Not sure if thats IE specific.
document.getElementById("SomeName").scrollIntoView(true);
You could set the Window Location to include the # anchor, and the browser will scroll to it.
Window.Location = "http://yourSite.com/YourPage.html#SomeName";