重定向到其他页面，然后进行动画处理以达到特定的滚动状态 [英] Redirect to some other page then animate to reach a certain scrollTop

问题描述

想精确地执行到另一个页面的内部链接的操作！但是通过jquery. 不能像使用视差滚动那样使用常规的外部跳转，因为这种跳转不适合这种跳转.

Want to do exactly what going to internal links of another page does! But through jquery. Can't use regular external jumps as using parallax scrolling which doesn't go well with jumps like that.

对于内部链接，我使用了类似的东西-

for internal links, I used something like this-

    $(function() {
    $("#clickNews").click(function(e){
        e.preventDefault();
        $('html,body').animate({scrollTop: 2400}, 1500);
    }); 
});

但是如何执行后跟animate()的重定向?

But how to perform redirecting followed by animate() ?

我想单击页面上的锚点..以转到另一页面的特定scrollTop

I want to click an anchor on a page.. to got to another page's certain scrollTop

有这样的方式->>

$("#clickCatalog").click(function(e){
    e.preventDefault();
    window.location = '/ABC/';
    window.load(function(){
    $('html,body').animate({scrollTop: 0}, 1500);  
    });
});

推荐答案

您也可以使用localStorage来完成此任务.我尝试了一次，它对我有用.我在导航选项卡中使用了它，这就是为什么要将元素id传递给localStorage的原因.

You can also use localStorage to do this task. I tried once and it works for me. I use this in my navigation tab, that's why I'm passing the element id to the localStorage.

$('#block li').click(function (){
    //get the clicked element's id. eg:- id='1'
    var menu_selector = $(this).attr('id');
    //store the value into localStorage
    localStorage.setItem('selector', menu_selector);
    //do the redirection
    window.location.replace("/about");
});

//if localStorage is not empty  
if(localStorage.getItem('selector') != 'undefined' && localStorage.getItem('selector') != null) {
    // get the stored values
    var selector = localStorage.getItem('selector');

    //I'm asuming, my destination is <div id="destination-1"></div>
    var destination = $('#destination-'+selector);

    //now do the scrollTop
    $('html, body').animate({
        scrollTop: destination.offset().top - 50
    }, 700);

    //distroy the local storage
    window.localStorage.clear();
});

还请注意，这不适用于非常老的浏览器.

Also note this will not works for very old browsers.

这篇关于重定向到其他页面，然后进行动画处理以达到特定的滚动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！