I have several collapsible blocks (divs) in my page with listviews inside them. The lists are pretty long (about 100-200 elements each.) When I un-collapse a block, scroll down a page, and click/tap one of the element in the list, the page scrolls to the top before sliding to the next page.
This behavior is somehow annoying and doesn't look good. I there any way to prevent this behavior?
If you have any additional question about my post, don't hesitate to ask me.
Thanks in advance.
If you use a link with "#" as href, it will jump up to the top of the page, however if you add "return false;" after the exectution of your code, it won't jump up. Example:
<script>
function test(){
alert('It works!'); // Just a simple function
}
</script>
<!-- Div to make the page scrollable -->
<div style="margin-top:1000px;height:1px;width:1px;"></div>
Yay
<!-- Triggering the test function and not jumping up to the top -->
I'm not sure if this is what you were thinking about though.
Related
I have a website (that is quite long so, you need to scroll) that lists some tutorials/presentations.
For the convenience I decided to create a menu on the top of the page, where the user can click on it and jump to the right place (on the same page). The code for the menu:
<ul>
<li>Tutorial 1</li>
...
</>
So now on the site, I have couple of hidden anchors, that look the following:
<p><a name="tutorial1" ></a></p>
The idea is, that the user clicks on the link and jumps to the right spot on the website.
BUT there is a Problem: The site's template has a menu on the top, that is always visible (also when you scroll). So whats happening is that when I click on a menu item the correct spot is covered by this menu. So what I actually want is that after the click the site jumps to the achnor minus the offset, that is created by this menu.
So I was wondering, whether I could achieve this by adding some CSS to my anchor like here:
<p><a name="tutorial1" style="positioning:relative; top:-60px" ></a></p>
I dont see any effect though. What am I doing wrong?
Make sure you add a semicolon at the end of every CSS property except for the last one.
<p><a name="tutorial1" style="positioning:relative; top:-60px" ></a></p>
You want to set the height of the menu to what it is now. Then place the rest of your website in a website container. That way the fixed header will not overlap with the content of your website.
I'm using a HTML anchor tag for a "back to top" link in the footer of my web page:
Back to top
At the top of the page I inserted another anchor tag in <HEAD>:
<a id="#top"></a>
Clicking on the footer anchor link causes the page to scroll up as intended, but is there a way to simply scroll to top (using HTML) without refreshing the page?
For context, search results are being displayed so when the page refreshes, the results are lost.
I found a possible solution using Javascript (see below - it scrolls to top without refreshing the page) but this causes other issues for me (search input field becomes frozen and user cannot enter more terms), so I'm asking whether there's a solution using HTML:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "fast");
return false;
});
If you want to scroll to top of the page(your div is on top)
You can use below Javascript syntax to achieve this.
window.scrollto(0,0) // (0,0) being the location
I am unsure what is going. I have two footers. One footer is a sidebar, and my other footer is a regular footer on the bottom of the page. My anchor tag in my bottom footer, that links to my about page, takes me to the bottom of the page instead of starting at the top, and my anchor tag in my sidebar footer takes me to the middle of the page! Other Anchor Links are taking me also to the middle or random parts of the pages when loaded.
I am not using anything special with the anchor. I don't think...
Here is my anchor for both footers:
<a href="/about" class="a-color">
<small>About</small>
</a>
My pages are loaded with ng-view. I am not using $anchorScroll
ngView retains the scroll position when you navigate from one page to another. once view loaded then can use $anchorScroll to change viewport or can add autoscroll="true" to ng-view element
<div class="ng-view" autoscroll="true"></div>
Use this code. It will always takes page to top on window load.
$(window).load(function(){
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
});
Seemingly, your browser has an issue. 1. Which browser you are facing this on? 2. Did you try on any other browser? 3. Is this code running fine on any other machine?4. Did you clear cache/cookies and tried again?
Workaround:
Definitely not the perfect solution but as a workaround, try the below code and see if this works out for you:
<a href="/about#top" class="a-color">
<small>About</small>
</a>
as per my understanding you don't want page to reload after user clicks on any link on your page, you only want some area should get refreshed right ?
In that case you can use templates, configure route according to states and by click on link you can change template by $state.go.
Right...
I am working on a client's website and so far most of it is working well.. until today...
The URL: http://www.chris-loweth.co.uk/shoaib-hassan-photography/site_demo_1/
When the page displays it is jumping to a H1 on the page that is half way down the page...
There are a few <a href="#"> links for dummy content but these shouldn't be working like scroll anchors... and there's definitely not an anchor in the div that the browser seems to be scrolling down to...
Spent hours on this and wondered if some fresh eyes might help...
I've tried to validate the markup but as this is a test site some of the div IDs duplicate so validation fails.
Thank you guys n gals!
I don't think it's jumping to the H1. I think it's this line near the top of your tools.js file that is doing it:
$('input[type="text"]:first').focus();
It is scrolling to put this in view, and depending on your browser size, this could well put the H1 above at the top of the window.
The problem is caused by this line in the javascript file:
// Set focus to event title on page load
$('input[type="text"]:first').focus();
The first input field is way down on the page. Setting the focus to it is causing the browser to scroll to the input field instead of remaining at the top of the page.
I have markup like this on somepage.html:
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
<h1>somecontent</h1>
</div>
And links like this on another page (let's call it someotherpage.html):
<a href='somepage.html#hashtag1'>first content div</a>
<a href='somepage.html#hashtag2'>second content div</a>
<a href='somepage.html#hashtag3'>third content div</a>
However when I click on one of these links I don't see the expected behaviour - the page loads as normal but the scrollTop of the window doesn't match these divs. I've tried changing the IDs as they had hyphens in the to start with, this didn't make any difference - I've also tried changing what element the ID is on, i.e changed the <h1> to have the ID, then changed the <h1> to an anchor, but no luck.
When I'm already on the page, if I edit the hasthag and hit enter, it works as expected - changing the scrolltop of the window to the element with the ID of the hashtag without refreshing the page - but it doesn't work on the first hit.
Am I missing something obvious here?
EDIT:
Using FF 9.0.1 on Mac OSX
Turned JS off using web developer toolbar
changing or removing CSS doesn't seem to make any difference
UPDATE:
This works fine if I enable javascript - which is exactly when it doesn't need to work.
I have this as a catch for users with no javascript / disabled js. WTF, firefox?
Given your specific example, it seems to me that the scrollTop only changes when the page is already long enough to require scrolling.
When all the content is in view, the scrollTop position remains at the top of the document however when the page requires some scrolling, the scrollTop scrolls as far as the document can already scroll.
If scrolling to the required ID does not exceed the total possible scroll position, then the element in question will apear at the top of the page, otherwise the document will only scroll to it's maximum (based on its content).
Hashtags don't work with ids. You have to put a tags like this: <a name="foo"></a>. Then you can link to them using go to foo. Same goes for linking between multiple pages.