Jump to content

html code to jump to bottom from a button


Recommended Posts

You can't use the name attribute. It is deprecated.

 

Put this right before the closing </body> tag

<div id="bottom"></div>

Then link to it from anywhere using #bottom as the URL

<a href="#bottom">Bottom of document</a>
Link to post
Share on other sites

Hallo Foxy Mod,

 

thank you, but there is no body tag. I tried several variants, but none was effective.

I put <div id="bottom"></div>

in front of

Here is the entire text with coding:

 

<h3 class="large-title accent-color">Získat mladistvější a zdravou pleť není obtížné...</h3>
Přihlaste se k odběru zpravodaje a novinky Vám přistanou ve Vaší e-mailové schránce!
<body><a class="button hexagon">Chcete se dozvědět více?</a><div id="bottom"></div></body>
<a href="#bottom">Bottom of document</a>

 

I added a body to the last part, which I want to be jumped from, but it does work.
Can you please tell me, what is wrong?
Thank you!
Milada
Link to post
Share on other sites

Your page has to have a <body> tag. HTML should have an <html> tag, a <head> tag and a <body> tag with the following structure:

[ As shown in the tutorial http://www.w3schools.com/html/html_head.asp ]

 <!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html> 

Please read the HTML tutorial again, your code needs to be valid in order to work properly. You can check if your code is valid here: http://validator.w3.org/#validate_by_input

Link to post
Share on other sites

thank you for coming back to me so early!

Actually, it does not refer to a page, it is a text over the background picture (the 1st one). Please have a look at this link: http://moreyouthfulskin.com/cs/domu/

 

When clicking on "Chcete se dozvědět více?" button,

 

I want the button click jump to the newsletter from at the bottom of the same page (PŘIHLASTE MĚ K ODBĚRU)

 

Is it perhaps clearer?

 

If anything, I can provide you with more information.

 

Milada

Link to post
Share on other sites

ITS Wordpress, there wouldn't be any body tags in post, page editor, the opening body tag are in the header.php, the closing body tag within footer.php, the content from post/page editor is inserted within page.php or single.php between included header.php and footer.php.

 

If you want it to go to newsletter, you should insert <div id="bottom"></div> where the newsletter starts.

Link to post
Share on other sites

Thank you dsonesuk, but given the fact that this is button link, how do I incorporate your code there? I tried this:

<a class="button hexagon">Chcete se dozvědět více?</a>
<div id=”Newsletter”><div id="bottom"></div>
and this:
<a class="button hexagon"><div id=”Newsletter”><div id="bottom">Chcete se dozvědět více?</div></a>
What should be the code?
Milada
Link to post
Share on other sites

I don't why this is so difficult? This

 

<a href="#bottom">Bottom of document</a>

 

With href value of '#bottom' refers to the id ref 'bottom' as in id="bottom".

 

So anywhere this singular ref is placed, is where the user is taken to, IT however will only bring the targeted id to top of browser window, IF! Content below it is same height as browser window, else the effect will be of just showing bottom of page content.

Link to post
Share on other sites

I am confused: should I use <div id="bottom"></div> or <a href="#bottom">Bottom of document</a> what you suggested afterwards?

I do not understand it anymore. I understand well, how to add a link to take me to a linked page, but I do not understand this, how I should incorporate it in the button code: <a class="button hexagon"></a>

 

Should I replace bottom with "newsletter"?

Link to post
Share on other sites

I don't why this is so difficult? This

<a href="#bottom">Bottom of document</a>

With href value of '#bottom' refers to the id ref 'bottom' as in id="bottom".

So anywhere this singular ref is placed, is where the user is taken to, IT however will only bring the targeted id to top of browser window, IF! Content below it is same height as browser window, else the effect will be of just showing bottom of page content.

 

check out http://www.w3schools.com/html/html_links.asp under

HTML Links - Create a Bookmark
Link to post
Share on other sites

I read it already several times, but I do not understand, what you mean. Especially, I do not understand the second part at all. Can you explain it to me with respect to the coded text I sent you?

I am trying to learn new things, but if I do not understand, how these codes function, what they suppose to do, please understand it from your point of you, who is a specialist in this are of knowledge, you know what you talk about and try to understand that I do not even have an IT education, please try to imagine my position.

 

Can you please also help me with the css customization of the knews plugin? I sent you my suggestion, but there is no reply from you.

Thank you.

Link to post
Share on other sites

URLs have the following components:

http://www.example.com/path/file.html?a=value#target

 

http:// Protocol: Tells the browser how to communicate with the server.

www.example.com Host name: Tells the browser where on the internet to go.

/path/file.html Path: Tells the server what file was requested.

?a=value Query string: Tells the server what information is requested.

#target Hash: Tells the browser where on the page to go

 

The component we're dealing with here is the hash. When you click on a link with a hash in it (<a href="page.html#something">) it scrolls you down to the element that has an id attribute with the specified value.

 

If the hash is "#target" then it will scroll to <anything id="target">

If the hash is "#bottom" then it will scroll to <anything id="bottom">

In these examples "<anything" refers to the name of the element, it could be <div>, <h1>, <p>, <span> or any other element. The only important part is the id attribute.

  • Thanks 1
Link to post
Share on other sites

yes, I very well understands, that when there is a <a href="page.html"> it links to a linked page

 

I am confused by the fact that there is a button, and I do not understand how to incorporate the code into the button

 

So based on your message, I have this code:

 

<a class="button hexagon"><div id="bottom">Chcete se dozvědět více?</div></a>

 

I cannot write: <a href="#bottom">Bottom of document</a>

I do not want to have a text saying "Bottom of document" in my text.

 

Can you please help me to solve this problem?

Thank you in advance.

Link to post
Share on other sites

If you understood, then you would be doing it correctly. Please stop to read carefully, I've explained it very clearly. The link (or button) needs an href attribute. That attribute has a URL pointing to the page and position to which you want to go.

 

The hash is the important part of the URL. You can call it "bottom", or "end" or "anything", it doesn't matter what you call it, it's just an identifier for a part of the page.

 

Here's your button:

<a class="button hexagon" href="#abcdefg">Chcete se dozvědět více?</a>

 

 

This piece of code has to be at the very end of your code, as far down on the page as you can put it. This is where the browser will go when you click on the button

<span id="abcdefg"></span>

 

You'll notice I used a <span> instead of a <div>. That's because it doesn't matter, you can use anything you want as long as the ID attribute has the right value.

 

 

Here's a page in the W3Schools tutorial which explains exactly how to do it if you read carefully. Read the "HTML Links - Create a Bookmark" section: http://www.w3schools.com/html/html_links.asp

  • Like 1
Link to post
Share on other sites

 

 

I cannot write: <a href="#bottom">Bottom of document</a>

I do not want to have a text saying "Bottom of document" in my text.

 

 

You can change 'Bottom of document' text to whatever you want! Usually a descriptive text relating to where the link will take you, but it must have text, image, or some kind of child element that you can identify as a bookmark link, empty of these the bookmark will be invisible to user and usless.

Link to post
Share on other sites

hallo both!

 

thank you very much for your patience. The problem is that I get always blocked by a fear of doing it wrong and it might be more difficult or complicated than it is.

So I think I finally found the "solution".

Is this code correct?:

 

<a class="button hexagon" href="#bottom">Chcete se dozvědět více?</a>

 

I cannot test it myself, as I am experiencing 404 error page.

 

Thank you for letting me know,

 

Milada

Link to post
Share on other sites

Hallo again,

 

can you please Foxy Mod or Dsonesuk help me with customizing kNews extended?

/* Write here your CSS classes. Please, use div.knews_add_user prefix to customise all kNews Subscription widgets at once, or #knews_widget-2 prefix to customise this one. Example: div.knews_add_user input { border: #e00 1px solid; } */

Here I do not understand what CSS classes I am supposed to use? Actually, I do not know which css classes are usually requested for a form subscription and what should they "look" like?

Can you please help me?

Thank you.

Milada

Link to post
Share on other sites

I have giving links to tutorials explaining what classes are. The developers gave you example of the class to use. You can press F 12, and web developer inspector option will show what you can use to identify the classes used and the styling properties used, then you adjust to your needs where it gave you the example.

Link to post
Share on other sites

hallo both!

 

thank you very much for your patience. The problem is that I get always blocked by a fear of doing it wrong and it might be more difficult or complicated than it is.

So I think I finally found the "solution".

Is this code correct?:

 

<a class="button hexagon" href="#bottom">Chcete se dozvědět více?</a>

 

I cannot test it myself, as I am experiencing 404 error page.

 

Thank you for letting me know,

 

Milada

 

The best way to find out if the code works is to just test it.

 

That's only half of the code you need. Without the second half, that code will just take you to the top of the page.

 

The second half of the code is <div id="bottom"></div>. That piece of code has to go to the part of the page that you want the user to jump to. In your case, the bottom, which means that it has to be the very last thing in your code.

 

Hallo again,

 

can you please Foxy Mod or Dsonesuk help me with customizing kNews extended?

/* Write here your CSS classes. Please, use div.knews_add_user prefix to customise all kNews Subscription widgets at once, or #knews_widget-2 prefix to customise this one. Example: div.knews_add_user input { border: #e00 1px solid; } */

Here I do not understand what CSS classes I am supposed to use? Actually, I do not know which css classes are usually requested for a form subscription and what should they "look" like?

Can you please help me?

Thank you.

Milada

 

CSS classes are explained on this page of the CSS tutorial: http://www.w3schools.com/css/css_syntax.asp

You should read that entire page (and probably the rest of the tutorial), but the important part is down at the "The class Selector" section.

 

The class selector (a selector preceded by a dot) selects all elements that have the specified word in their "class" attribute. (read about attributes here: http://www.w3schools.com/html/html_attributes.asp)

 

Here's a CSS rule using a class selector:

.abcdefg { color: red; }

These rule will make the text red for all these elements:

<div class="abcdefg">Red text</div>
<span class="abcdefg">Red text</span>
<p class="abcdefg  something">A paragraph with red text</p>

Notice that in the last element I have two class names in the same attribute.

Link to post
Share on other sites

Thank you dsonesuk and Foxy Mod for your feed-backs.

@Foxy Mod: thank you for the hint for the second part of the code. As there is no text field in the kNews widget, I added this code to the Genesis eNews extended text field (as it is at the page bottom, too) - and it functions!

 

Thank you also both of you on kNews hints - do these instructions refer also to the final functioning of the kNews plugin, ie. will it "accept" the entered e-mail addresses and will then the users receive the newsletters?

If I settle some codes, may I then ask you to check them for me?

 

Thank you in advance and regards,

 

Milada

Link to post
Share on other sites
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...