a tag that scrolling to buttom of page

Question

Need to make my button scroll to the buttom of the site. this is my button:

 <a href="#" class="button-bord">Read more <br /><p class="glyphico glyphicon-chevron-down arrow-down"></p></a>

How can i make it so that i scrolls to the buttom of the site? Any suggestions :)

That it dosen't do anything when i have added the onclick="function" to my tag — Rasmus Vejby, Oct 02 '15 at 20:27
Then you should try to find out why. Open your browsers development console and look what error occurs. Because that solution certainly does work. So question is what is wrong when you try it. — arkascha, Oct 02 '15 at 20:29
Doing a tag edit and voting to close this as duplicate, because it turns out OP was looking for a JavaScript/jQuery answer, not an HTML/CSS answer. — Maximillian Laumeister, Oct 02 '15 at 20:37
Was just really lookign for 1 to work, html/css js you nname it. Got what i needed and i don't need anymore help. — Rasmus Vejby, Oct 02 '15 at 20:57

Maximillian Laumeister · Answer 1 · 2015-10-02T20:39:00.857

2

The supposed duplicate question linked in the comments asks for JavaScript/jQuery answers, but from your tags it looks like you're looking for a pure HTML/CSS solution (note: question tags have since been edited). You can do it using an a tag without any JS.

Just put an element with a certain id at the very bottom of your markup (in this case it's another anchor with the id bottom), then you can use the original a tag to link to that element within the page. If the new element is at the bottom of the page, then you're linking to the bottom of the page.

The div with class spacer (and a height of 800px) is used in this example to push some of the content down on the page, so that the document has a scrollbar. That way you can see the page scroll after you click the internal link.

Live Demo:

.spacer {
    height: 800px;
}

<a href="#bottom">Click to go to bottom</a>
<div class="spacer"></div>
Bottom of the page
<a id="bottom"></a>

edited Oct 02 '15 at 20:39

answered Oct 02 '15 at 20:24

Maximillian Laumeister

19,884
8
59
78

That does not scroll to the bottom of the page, but to an anchor with the id "bottom". – arkascha Oct 02 '15 at 20:26
2

@arkascha The idea is to put the anchor at the bottom of the page. i.e. below all your other markup. Then when you link to the element, you are by definition linking to the bottom of the page. – Maximillian Laumeister Oct 02 '15 at 20:26
Sure, that was obvious. _But you should say so in your answer._ – arkascha Oct 02 '15 at 20:27
1

@arkascha Thanks, edited. – Maximillian Laumeister Oct 02 '15 at 20:29
`height:800px` is not needed at all and can be misleading. – kursus Oct 02 '15 at 20:31
1

@kursus I edited my answer to include an explanation of why `height: 800px` is required for the live demo to be useful. – Maximillian Laumeister Oct 02 '15 at 20:33

score 1 · Accepted Answer · edited May 08 '19 at 12:44

1

Include the jQuery library:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" />
</head>

Here is in the script:

<script>
  $('.button-bord').on('click', function() {
    $('html, body').animate({scrollTop:$(document).height()}, 'slow');
    return false;
  });
</script>

edited May 08 '19 at 12:44

Norbert

2,741
8
56
111

answered Oct 02 '15 at 20:28

Esko

683
9
23

Excatly thanks :) Didn't need the head since i'm workinng in mvc :) But thanks alot worked, and nnow i can keep going :) – Rasmus Vejby Oct 02 '15 at 20:32
Do you know if it shall scroll to the buttom of my image: What would i then have to do? :) – Rasmus Vejby Oct 02 '15 at 20:40
To scroll to the bottom of the image, replace `document` with something referencing to the image. If it's the only image with class `img-responsive` then replace `document` with `'.image-responsive'`. – Esko Oct 02 '15 at 21:21
I see the idea but i won't scroll down, it just saying syntax error :) – Rasmus Vejby Oct 03 '15 at 08:02

a tag that scrolling to buttom of page

2 Answers2