Best way to scroll HTML page to given anchor in a responsive page

Question

I have created a page based on this responsive template

https://html5up.net/uploads/demos/phantom/

I would like the blocks to have an anchor on the same page: when you click on it, it shows you the content (no redirect to a different page)

What is the best "modern" way to achieve this? plain anchor link/jquery/css other?

Can you show me an example?

thanks

Nikhil Nanjappa · Accepted Answer · 2017-10-23T08:37:16.027

5

The best way according to me is to place the target content on the same page with an ID(obviously unique) <div id="generic"> ..content.. </div> and on your <a> tag's href, target the required div with the ID with href="#generic". like so

<a href="#generic">
  <h2>Magna</h2>
  <div class="content">
     <p>Sed nisl arcu euismod sit ame.</p>
  </div>
</a>
.....
.....
.....
<div id="generic">..</div>

Additional to this add smooth scrolling to make it look like its sliding up/down to the targeted content.

To not add the #generic to your url try using a super simple JQuery fix additional to the above code:

$("article a").click(function(e){
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500);
    e.preventDefault(); //this is the important line.
});

I have tested this on your website & it works like a charm! Let me know if any issues.

edited Oct 23 '17 at 08:37

answered Oct 04 '16 at 15:34

Nikhil Nanjappa

6,454
3
28
44

To me it looks like the basic anchor link (href to id) does not scroll to the precise place. And I am pretty sure this does not work very well in mobile responsive. – Sam Provides Oct 04 '16 at 15:37
Well actually it does :-) You can have a look at my own website's menu on how it works [here](http://nikhilnanjappa.github.io/) – Nikhil Nanjappa Oct 04 '16 at 16:44
How to hide the #part in the url? when I click in your navbar on the link it does not add #, how to do that? – Sam Provides Oct 05 '16 at 09:27
I have written couple of JQuery lines for that part. I have updated my answer. Check it out – Nikhil Nanjappa Oct 05 '16 at 10:40
surely if your id is unique, you wouldn't name it `generic` ? `:-D` – Martin Oct 05 '16 at 10:46
Hahah nice observation...That was the code he used in his project, so took that as an example :-D – Nikhil Nanjappa Oct 05 '16 at 10:50

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

Google... single page application(SPA) I know it is possible using AngularJS etc. but there might me some solutions to achieve this only with Jquery/Javascript

Take a look at Architecture for single page application (JavaScript)

Also take a look at http://singlepageappbook.com/single-page.html

edited May 23 '17 at 12:06

Community

1
1

answered Oct 04 '16 at 15:32

Raul

77
1
13

score 0 · Answer 3 · answered Oct 04 '16 at 15:33

There are plenty of possibilities to do so, the easiest and most dumb way is create and anchor link like this:

<a href="#myContainerId">To my container</a>

In which the href is the id of the container you want to reach with the click. Of course this method jumps without any animation. A good example of an animated scrolling with anchor is found here:

CSS tricks smooth scroll

Let me know if that helps.

Cheers

Best way to scroll HTML page to given anchor in a responsive page

3 Answers3