Kevin M Posted January 18, 2007 Share Posted January 18, 2007 In the layout I've been working on, I have an image at the bottom that scrolls you to the top of the page useing JavaScript. For all the other images, they are contained in the CSS, but for this one I have to use the HTML to put the image there.So I was wondering, is there any way to have JavaScript and a URL contained in the CSS, so when someone clicks the image, it brings them to the top?Thanks,Kevin Link to comment Share on other sites More sharing options...
S@m Posted January 18, 2007 Share Posted January 18, 2007 Well, to do a real quick and dirty way, you could put an "onclick" handler on the image. Then set the JS to be scroll 0,0 type thing... Link to comment Share on other sites More sharing options...
pulpfiction Posted January 18, 2007 Share Posted January 18, 2007 Rather than using JavaScript you can use simple HTML to take the page to top... <body><span name="top">Hi</span><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="#top"><img src="imgname.gif"></a></body> If you are looking for something like this, then important part of code are ......name="top"> Whatever name you give on the top use it in the bottom href with #.. <a href="#top"> Link to comment Share on other sites More sharing options...
jlhaslip Posted January 19, 2007 Share Posted January 19, 2007 Change this line: <span name="top">Hi</span> to this: <a id="top"></a> Link to comment Share on other sites More sharing options...
Kevin M Posted January 19, 2007 Author Share Posted January 19, 2007 Ok, thanks for the help. Link to comment Share on other sites More sharing options...
S@m Posted January 19, 2007 Share Posted January 19, 2007 I would use the javascript method. <p><a href="java script:scroll(0,0)" rel="next" title="Return to the top of the page">Top</a></p> That will make sure you get to the very top of your page. The id method will work, but it will only take you as far up as the id. Problem with that is that the user may have to scroll up a smidgen more to get to the actual top.IMO, the javascript method is more efficient.If a person has javascript disabled, they probably have css disabled, cookies disabled, and their internet experience is crap anyway. So let them look at your long scrolling text as punishment. Link to comment Share on other sites More sharing options...
Kevin M Posted January 20, 2007 Author Share Posted January 20, 2007 I'm currently useing that function, except it's an image that goes to the top. I was just wondering if this could be concealed in the CSS somehow, so I wouldn't have to use the <a href and <img src codes. Link to comment Share on other sites More sharing options...
Anders Moen Posted January 20, 2007 Share Posted January 20, 2007 Either use this: <a name="#top"></a>THIS IS THE TOP :DLOTS OF TEXT AND CONTENT GOES HERE<br>LOTS OF TEXT AND CONTENT GOES HERE<br><a href="top">Top</a> Or use this: <a href="java script:scroll(0,0)">Top</a>< I've seen people write <a href="java script:scroll(0,0)">Top</a> and that's wrong, because it's written in one word. Link to comment Share on other sites More sharing options...
jesh Posted January 22, 2007 Share Posted January 22, 2007 The id method will work, but it will only take you as far up as the id. Problem with that is that the user may have to scroll up a smidgen more to get to the actual top.The HTML-only version will take you to the top of the page if you don't specify an anchor with a matching name. For example (using pulpfiction's example):<body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="#top"><img src="imgname.gif"></a></body> Clicking on that image in the bottom will take you to the very top of the page even though there is no anchor specified with a name "top". According to W3Schools (http://www.w3schools.com/html/html_links.asp), If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.Whatever way works best for you. Link to comment Share on other sites More sharing options...
Kevin M Posted January 23, 2007 Author Share Posted January 23, 2007 Thanks. That's what I've been doing, the JavaScript way. What I was wondering, was is there any way to put the javascript function into the CSS, so I could just put <div class="gototop"> </div> instead of having the image linked inside the Div. Maybe this isn't possible. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now