All geek questions in one place

Snap binding to a specific position on the page

I have a binding that links to another page. When it is clicked, by default it will move to the beginning of the next page. I want this to reach a certain position on the page. How to do it (using jQuery slide effect or regular html)?

For example, when the .sample a button is clicked, I want it to bring you to a specific position on the binding page.

+3
source share
7 answers

OK, so this answer is very specific to your problem.

, , , div, , .

, , . #whatever #bgaboutbody, , .

, - . , , . script ( </body>).

window.setTimeout(function(){
    if(window.location.hash){
        var $target  = $(window.location.hash).closest("#bgaboutbody");
        if($target.length)
            $('html, body').animate({scrollTop: $target.offset().top}, 1000);
    }
}, 100);

:

, JavaScript . ( - , ). , , js html <head> . CSS :

.js #contact, .js #about, etc { display:none }

, JS. , JavaScript, , , JS , .

+3

:

<a name="anchor1"></a>


<a id="anchor1"></a>

:

<a href="http://www.example.com/some/page.html#anchor1">Go to anchor 1</a>

:

<a href="#anchor1">Go to anchor 1</a>
+13

.

        $('.container').on('click', function(e){
            var hash        = $(this).find('a').attr('href'),
                target      = $('html').find('p'+hash),
                location    = target.offset().top;

            $('html, body').stop().animate({scrollTop: location}, 1000);

            e.preventDefault();
        });

html :

<div class="container">
   <a href="hash">click me</a>
</div>

<p id="hash"></p>

, .

+2

, , - :

 <a name="myAnchor" />

, "website.html". :

 <a href="website.html#myAnchor">Click here</a>

,
Fabian

+1

html, - "#". :

<a id="somelocation"></a>

, :

<a href="#somelocation">Go to somelocation on this page</a>

.

<a href="someotherpage.html#somelocation">Go to somelocation on someotherpage</a>
0

.

0

, . , , "position: relative" , , , :

<a name="target" style="position: relative; padding-top: 200px">&#x200B;</a>

, , , . , . , .

0

Source: https://habr.com/ru/post/1724842/

More articles:


All Articles