How to create button back to top. In image, button in the middle content and footer and this have 2 circle as border.
Asked
Active
Viewed 3,316 times
-2
-
1where r code ?? – Sumit patel Sep 24 '16 at 04:53
-
Please edit with your Code. – Prifulnath Sep 24 '16 at 04:56
-
we are seeing that you have already created in your image – SumanKalyan Sep 24 '16 at 06:15
-
Add an ID in a tag where you wish to be ushered to on the click. `` Now place an `` tag and reference the ID in the href, ex: `Go to the destination` Again, reference the ID or Class in your href link and it will bring you to that place on the page. Check it: https://jsfiddle.net/j7jo80jm/ – dale landry Apr 16 '17 at 23:33
2 Answers
0
this should get you started
There are a lot of different ways to do this, without knowing the exact scope of the project I just put together some very basic stuff and I'm sure someone else can answer you more thoroughly, but I want to explain what I did and what you need.
You are trying to create a link to the top of the page. There are some really great ways to do this in Javascript, which I will not cover.
What you need is an anchor at the top with a name, we specify this with
<a name=""></a> which will go at the very top of your page. The "button" which takes your page back to the top will be a horizontal reference anchor. <a href="#"></a>.
The other thing you were looking to do was style it. This can probably be achieved in more ways than you can imagine, but the way that I approached it was to create two div's which surround your character/src/ whatever you decided to use for it. I recommend fontawesome's up arrow <i class="fa fa-arrow-up" aria-hidden="true"></i> after including font-awesome.io on your page of course.
You want two div's which can either be styled together or separately, depending on what you're working with, it's probably more applicable to style them separately, but regardless the code you're looking for will be similar. You want your div's to posses two properties. Border which is defined with three attributes, size, style, color. it looks like this border:1px solid black; and the other property you'd be interested in would be border-radius which accepts up to 4 parameters, one for each corner starting at the top right if I'm not mistaken. If you're circles are in fact circles, you'll be able to set the value to 50%, like this border-radius:50%;.
I hope this helped. The last thing I wanted to mention is that it looked like you had some margin or padding in your picture, so don't forget to add those. They are set top, right, bottom, left; or top-bottom, left-right; or top, right-left, bottom; or top-right-left-bottom;
David
- 1
- 4
0
You can use onclick to do this.
<div> #style your position in this div
<a onclick="window.scrollTo(0,0)"><img src="images/abc.jpg"></a>
</div>
SumanKalyan
- 1,681
- 14
- 24
-
This question doesn't deserve to be answered; familiarize yourself with the guidelines on asking good questions and don't answer ones that don't follow those guidelines. – Nic Sep 24 '16 at 12:38