a href class to scroll to div

Question

I have 5-10 links all with the same class/

<a class="content-link" href="/profile/about-me/<? echo $row['username'];?>/">

What I'm trying to achieve is when the user clicks on this link that then the user is then navigated to the #profile-body div using javascript.

Very similar to this post however the only difference is that instead of having the div which i want the user to be navigated to in the a href like so <a href="#profile-body"> I need it to be done via javascript so that the link I have in the href actually loads.

Thankyou in advance for any help you can provide.

@Pete take you to the place in the current page and not to worry about the link thats just loaded within the profile body div :) — , Dec 20 '16 at 14:56
@Pete the question has already been solved and thats not what im trying to achieve — , Dec 20 '16 at 15:06
Possible duplicate of [Smooth scroll to div id jQuery](http://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery) — Heretic Monkey, Dec 20 '16 at 15:10

score 5 · Accepted Answer · answered Dec 20 '16 at 14:57

5

I'm aware you're looking for a Javascript solution but just in case you're willing to use Jquery here's a good one.

$(document).ready(function() {
  $('.content-link').click(function(e) {
    e.preventDefault();

    $('html, body').animate({
      scrollTop: $('#profile-body').offset().top
    }, 500);
  });
});

answered Dec 20 '16 at 14:57

dokgu

4,957
3
39
77

1

Ooops I forgot the event listener, editing my answer. – dokgu Dec 20 '16 at 14:57
thankyou! didn't know that it could be achieved this easily thankyou very much. will mark as answer shortly – Dec 20 '16 at 15:00
But using e.preventDefault() actually blocks the loading of the new URL. – roberrrt-s Dec 20 '16 at 15:02
@Roberrrt So after the user clicks on the link the page should scroll to the `#profile-body` container and then load a different page? That sounds a little weird. So far I'm not 100% clear on what OP needs. I just provided a solution to scroll to an element. – dokgu Dec 20 '16 at 15:04
What I *think* he needs is: loading the same / new page. And after page load, jump to the hashtag on the page. Applying the hashtag directly in the link would disable the reloading. – roberrrt-s Dec 20 '16 at 15:05
Which is why I was asking questions for clarification, you shouldn't really answer if you don't understand what OP is after – Pete Dec 20 '16 at 15:07
@Pete I answered when he gave this clarification: *take you to the place in the current page and not to worry about the link thats just loaded within the profile body div*. I don't think I did anything wrong there. If it's not the right answer then OP has the right to not accept my answer. The only reason why I said I'm not 100% clear on what OP needs is because he contradicted his previous comment. – dokgu Dec 20 '16 at 15:09
@uom-pgregorio Wow, you are a fast typer - the comment was made at 14:56:52, you answered at 14:57:05 – Pete Dec 20 '16 at 15:14
@Pete I was writing my answer based on how I understood OP's question. Before hitting submit I scrolled up to see if there were modifications to the question or additional comments. I read his comment which reinforced my understanding so I hit submit. I don't understand why this is still an issue for you. – dokgu Dec 20 '16 at 15:20

score 3 · Answer 2 · answered Dec 20 '16 at 15:19

This can also be done with pure CSS.

body {
  background: #999
}
.mylinks a {
  text-decoration: none;
  color: black;
  display: inline-block;
  padding: 2%;
  background: #444;
  color: #999;
}
.mycooldiv {
  background: red;
  width: 100%;
  height: 400px;
  margin-bottom: 30%;
  box-shadow: inset 0 0 10px 200px rgba(0, 0, 0, 0.55);
}
#profile-section1 {
  background: red;
  bottom: 100%
}
#profile-section2 {
  background: blue;
  bottom: 200%
}
#profile-section3 {
  background: green;
  bottom: 300%
}
#profile-section4 {
  background: yellow;
  bottom: 400%
}

<body>
  <div class="mylinks">
    <a class="content-link" href="#profile-section1">section 1 </a>
    <a class="content-link" href="#profile-section2">section 2 </a>
    <a class="content-link" href="#profile-section3">section 3 </a>
    <a class="content-link" href="#profile-section4">section 4 </a>
  </div>
  <div class="mycooldiv" id="profile-section1"></div>
  <div class="mycooldiv" id="profile-section2"></div>
  <div class="mycooldiv" id="profile-section3"></div>
  <div class="mycooldiv" id="profile-section4"></div>
</body>

roberrrt-s · Answer 3 · 2016-12-20T15:06:26.817

There's no reason to use jQuery though (unless you're using it already), this is a full vanilla approach. Setting the hash is optional.

Basically, this script is included on the new page, you set the hash manually and then just switch the offsetTop.

(function() {
    window.location.hash = "three";
    document.getElementById('three').offsetTop + "px";
})();

div {
    height: 250px;
    margin-bottom: 10px;
    background-color: #F00;
}

<div id='one'>one</div>
<div id='two'>two</div>
<div id='three'>three</div>

score 0 · Answer 4 · answered Dec 20 '16 at 15:02

The easy way of doing so is via JQuery:

$(".content-link").click(function () {
    $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 400);
});

With this, you have ALL your .content.link href controlled.

Anyway, it's worth to take a look at flesler/jquery.scrollTo

a href class to scroll to div

4 Answers4