Question

我正在尝试在我为公司开发的网站上实现效果/重定向。

以前我们有一个mydomain.com/weather，直接指向显示天气的特定页面。现在，由于我们将天气移动到根页面的一部分（/），我们希望转到mydomain.com/weather的用户登陆根页面，但窗口滚动到天气部分。

基本上，我试图获得相同页面锚点（#myAnchor）的相同效果但是使用网址。

我在谷歌上搜索了相同的页面锚点网址，但我只能找到有关常规锚点的内容。

任何帮助都将不胜感激。

Answer 1

首先，给你的＆＃34;天气＆＃34;部分ID

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

瞧！立即访问mydomain.com/#weather。浏览器应滚动到相应的元素。这也适用于锚标记

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

实施动画

假设您在单击某个元素

时应用滚动动画

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

使用jQuery

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

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

重定向

.htaccess和PHP都可以处理重定向

的.htaccess

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

PHP

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

实施动画

一个hacky解决方案，但有效。首先，在#weather

等文档的topper区域设置body元素

<body id="weather">

浏览器将保持在顶部，因为它绑定的id在body标签上。一旦文档准备就绪，您只需简单的验证就可以将动画滚动到所需的元素。我将其命名为#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);
    }
});

Answer 2

我设法使用上面的答案和window.pathname的组合获得了预期的结果基本上：

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

强制滚动特定网址

2 个答案:

实施动画

重定向

实施动画