D
D
Dima Pautov2015-06-29 19:52:05
MySQL
Dima Pautov, 2015-06-29 19:52:05

How to smoothly scroll the page to the desired id by going to it from another page?

Let's start. I have a menu.

<a href="#about">О нас</a>
<a href="#products">Наша продукция</a>
<a href="#portfolio">Портфолио</a>
 <a href="#jobs">Вакансии</a>
 <a href="#contacts">Контакты</a>

By clicking on its links, we will smoothly scroll to the blocks we need (Those that are indicated in href).

Here is js
$('#topMenu a').on('click',function(){
        var elementClick = $(this).attr("href"),
            destination = $(elementClick).offset().top - 110; //Так как шапка на сайте фиксированная, то вычтем ее высоту!
            
        $('html, body').animate({ scrollTop: destination }, 1100);
        return false; 
    });


And everything is great. But! Now we are on the inside page. From there, the transition through these menu items always goes to the main one (I have a condition in php, if not the main one, then display / # id). But by clicking, I get to the main page and abruptly go to the desired id, and without that -110 in the script. The script did not work, the page was updated!

How can you decide and make the same smooth scroll?
I came up with only 1 way. This is when you click on the link, write to the cookie or to the local storage (anyone like it) my id and when you go to the main page, scroll to this element, and then delete it (so that when you update the main one, it doesn’t scroll all the time).

Do you have any more ideas?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
P
Pavel Gogolinsky, 2015-06-29
@bootd

You can make the transition not through the anchor, but through the GET parameter. When going to the page and after the ready page, make a smooth transition to the element with the ID specified in the GET

S
scapp, 2015-06-29
@scapp

Pass not #id, but a parameter in the url and deal with it yourself after the page has loaded.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question