Оставьте страницу при нажатии кнопки, после того, как новые загрузки страницы начнут плавное прокручивание до указанного места.

Question

Я работаю над этим сценарием в течение нескольких часов, и я, наконец, в недоумении. Я почти уверен, что видел это раньше, но это может быть невозможно, и я не хочу тратить больше времени, если это даже невозможно.

Я хотел бы нажать кнопку, загрузить новый URL-адрес, после того как документ будет готов, я бы хотел, чтобы он автоматически сглаживал прокрутку до указанного местоположения на этой странице с помощью анимации (поэтому он прокручивается ровно, и я могу управлять скорость перехода).

Я думал, что-то вроде этого будет работать. Я могу быть рядом, но без сигары!

JS:

$("#backToWorkBtn").click(function() { 

    window.location.href = "index.php"; 

    $(window).on("load", function() { 
     $('html,body').animate({ 
      scrollTop: $("#workSection").offset().top 
     }, 800); 
    }); 
}); 

Я также пробовал ...

$("#backToWorkBtn").click(function() { 

    window.location.href = "index.php"; 

    $(document).ready(function() { 
     $('html,body').animate({ 
      scrollTop: $("#workSection").offset().top 
     }, 800); 
    }); 
}); 

HTML:

ниже на gallery.php

<a id="backToWorkBtn">BACK TO MY WORK</a> 

ниже на index.php

<section id="introSection"> 
    Intro Area 
</section> 

<section id="aboutSection"> 
    About Me Area 
</section> 

<section id="workSection"> 
    <a href="gallery.php">Web Design</a> 
    <a href="gallery.php">Print Design</a> 
    etc etc etc.. 
</section> 

Answer 1

Хорошо, я наконец-то решил эту проблему сегодня. Это было немного больно, но в целом у меня теперь есть работа. Я использую строку запроса (которую вы можете замаскировать в URL-адресе, если хотите потратить время на построение этой логики). Это, по крайней мере, является отправной точкой для создания и улучшения. Спасибо, Брэндон Бун, за помощь!

Page 1 (index.php)

<script> 
function GetQueryVariable(query, name) { 
    if (query.indexOf("?") == 0) { query = query.substr(1); } 
    var pairs = query.split("&"); 
    for (var i = 0; i < pairs.length; i++) { 
     var pair = pairs[i].split("="); 
     if (pair[0] == name) { 
      return pair[1]; 
     } 
    } 
    return ""; 
} 

var pageMark = GetQueryVariable(location.search, "id"); 

$(function() { 
    $('html, body').animate({ 
     scrollTop: $('#' + pageMark).offset().top 
    }, 2000); 
    return false; 
}); 
</script> 

<section id="introSection"> 
    Stuff Here 
</section> 

<section id="aboutSection"> 
    Stuff Here 
</section> 

<section id="workSection"> 
    <a href="gallery.php">Web Work</a> 
</section> 

<section id="faqSection"> 
    Stuff Here 
</section> 

Page 2 (gallery.php)

<a href="index.php?id=workSection">GO BACK TO MAIN PAGE</a> 

Answer 2

Включите их. .click() обработчики должны перейти в готовую функцию.

$(document).ready(function() { 
    $('html,body').animate({ 
     scrollTop: $("#workSection").offset().top 
    }, 800); 

    $("#backToWorkBtn").click(function() { 
     window.location.href = "index.php"; 
    }); 
}); 

Answer 3

Вы можете использовать jQuery.scrollTo плагин Ариэля Flesler для достижения этой цели.

Проверьте это: Live Demo

---

Page 1:

JS

$('#myButton').click(function(){ 
    window.location.href = 'http://fiddle.jshell.net/TLeHz/3/show/?scroll=scrollToMe'; 
}); 

HTML

<input id='myButton' type='button' value='navigate' /> 

---

Page 2:

JS

$(function(){ 
    //From: http://stackoverflow.com/a/901144/402706 
    function getParameterByName(name) { 
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
      results = regex.exec(location.search); 
     return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 

    //Scroll based on the value of the Query String param 'scroll' 
    var scrollToArea = getParameterByName('scroll'); 
    if(scrollToArea){ 
     $.scrollTo('#' + scrollToArea, 800);   
    } 

}); 

HTML

<div>test</div> 
<div>test</div> 
<div>test</div> 
<div>test</div> 
<div id='scrollToMe'>scroll to me</div> 

CSS

div{ 
    height:500px; 
}