Scroll to links for articles on page

Question

I would like to create a block and place that on the right hand side of my site.

Within the block I would like to have a list of links.

The links would scroll the viewport down to that article.

The page will be the homepage of the site.

I will use Views to create a page. I will select 10 full articles to be displayed on the page.

How can I go about creating a block to add to the right hand side which will contain links.

• I will need to have an id hook on the h1 of the article titles for the links to work.
• I have to loop through articles which show up in the view to get titles
• I need to create a block using the titles to create links such as a href="#example-article"

Day to day I code in Ruby on Rails, I am working on a Drupal project for a client and I am not well versed in PHP, never mind Drupal. I wouldn't be surprised if someone had wanted this same feature in the past - however - I don't work with 'blog style' sites often and I have not found any examples when searching online.

Any tips would be much appreciated. A link to a guide on how to achieve this would be amazing. Merely explaining how to get the articles object and loop through it for the titles and then put this in a block would get me 90% there.

Answer 1

The good thing for you is this is completely doable within the Views UI alone. No PHP is needed here. A full explanation is too lengthy here (and asking for tutorials is off topic). If you're a novice to Drupal, watching some tutorials on Views would be a good time investment since it's a core part of Drupal now.

Here's some additional info to navigate you 90% there. See the image of the Views UI to yourself started with your page & block view:

If you have a view of full content nodes, Drupal, by default, wraps a node display in a div with an id of node-<NID>. (if you have a custom theme it might differ, but it should be pretty easy check that out). As such, a default Views page of full blog posts should already be linkable with a #node-nid anchor.

As for the block, Views allows you to have multiple displays based off the same query. When you create your view, you can also create a block. You'll just to make a few alterations to the block so that links are presented as anchor links for the page they'll appear on:

• Add a Content: Nid field to the Block display, making sure to set For selectbox to This block (override) (i.e. only add it to the block display).
• Tick the Exclude from Display checkbox so that the Nid field doesn't appear on the block.
• Rearrange the Content: Nid field (via the down triangle next to the Fields Add button) so that appears first.
• Click on Content: Title to reconfigure its display, you'll want to untick Link this field to the original piece of content to remove the hyperlink to the blog and tick Output this field as a link under Rewrite Results, you'll be placing #node-[nid] in Link Path, which if you did all the above correctly, should rewrite the block links to an anchor link for each post display.

That should get you most of the way there. Views UI is pretty complex so it's going to take a bit of experimentation to understand it all. The above should navigate you mostly through it.