Force scroll on a specific url

Question

I am trying to achieve an effect/redirect on a website I'm developing for my company.

Previously we have had a mydomain.com/weather, direct to a specific page showing the weather. Now, since we moved the weather to a section of the root page (/), we want the users who go to mydomain.com/weather to land on the root page but with the window scrolled to the weather section.

Essentially, i'm trying to achieve the same effect of a same page anchor (#myAnchor) but with a url.

I've searched on Google for same page anchor url slash but I only could find stuff regarding the regular anchors.

Any help would be appreciated.

http://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page — borracciaBlu, Jun 22 '16 at 11:27

Chay22 · Answer 1 · 2016-06-23T21:30:26.123

Firstly, give your "weather" section an id

<div id="weather">
    <!-- weather content -->
</div>

Voila! Visit mydomain.com/#weather now. The browser should scroll you to corresponding element. This also applied to anchor tag

<a href="#weather">Weather</a>

Implementing animation

Suppose you're going to apply scroll animation when certain element clicked

<a class="to-weather" href="javascript:void(0);">See weather here</a>
<button type="button" class="to-weather">See weather here</button>

with jQuery

$('.to-weather').on('click', function(e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $("#weather").offset().top
    }, slow);
});

Redirect

Either .htaccess and PHP both can handle redirection

.htaccess

RewriteEngine On
RewriteRule ^weather$ /#weather$ [R=301,NE,L]

PHP

header("Location: /#weather", true, 301);

Implementing animation

A hacky solution but works. First, Set the #weather on element on topper area of document such as body

<body id="weather">

Browser will stayed at top as the id its bound to is on body tag. And once document is ready, you can do scrolling animation to desired element with just a simple validation. I'll name it #weather-area

$(document).ready(function() {
    //Not all browser contains # in location.hash
    var hash = location.hash.replace('#', '');
    if(hash === 'weather') {
      $('html, body').animate({
          scrollTop: $('#weather-area').offset().top
      }, 3000);
    }
});

This I know, what I'm trying to achieve is the exact opposite: enter mysite.com/weather (notice the missing #) and have page load and scroll to that section. I've read somewhere that it can be done with rewrite rules (the website already has some defined for it). — wadge, Jun 23 '16 at 17:49
I thought you said, you already knew how to redirect and just want to get to know how to scroll on specific element. I've updated my answer. @ddrjm — Chay22, Jun 23 '16 at 21:33
Hey again. I was wondering, is there any way I can get rid of the hash? I want to go to /weather and not /#weather — wadge, Jun 28 '16 at 14:16

score 0 · Accepted Answer · answered Jul 08 '16 at 15:58

I managed to get the desired result using a combination of the answer above and window.pathname essentially:

$(window).load(function() {
    if(window.pathname == '/weather') {
      $('html, body').animate({
          scrollTop: $('#weather-area').offset().top
      }, 3000);
    }
});

Force scroll on a specific url

2 Answers2

Implementing animation

Redirect

Implementing animation