CODEWITHSUNDEEP
javascriptjqueryhtml
SunBro
SunBro

Reputation: 15

Jquery Smooth Scroll only working internally

i recently asked a question and after dealing with it for like... 5 hours(unfortunately serious) i was able to smooth scroll to anchors. Here is the js i put in.

$(document).ready(function(e) {
$(".scroll").click(function(event){
     event.preventDefault();
     //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     //go to destination
     $('html,body').animate({scrollTop:dest}, 1000,'swing');
 });
});

I'm currently using ID as an anchor but i can switch to NAME too if you want.

Here's what i want: This only works within the same page. I want it to work across several pages.

Here's my example: This page, should load this page and then scroll to the anchor.

But instead, it jumps. What should i add to this code? As a graphic and html/css only designer, javascript is rocket science to me. So i'd appreciate it if you kept it dumb.

Upvotes: 0

Views: 74

Answers (1)

István Pálinkás
István Pálinkás

Reputation: 2352

Stick to JS, and pass a hash attribute:

<a href="http://something.com/some.php#start"> Go to page 2 ( Start ) </a>
<a href="http://something.com/some.php#goats"> Go to page 2 ( Goats ) </a>

and check with a simple JS on page2

<script>
    $(document).one("ready",function(){
        if( window.location.hash.length > 0 ){
             $("body, html").animate({scrollTop:$(window.location.hash).position().top},1000);
        }
    });
</script>

The script will lead to the object having the ID "start" (or having ID "goats") You can define the target on page2 addig an ID to Your division:

<div id="start"> Some content </div>
<div id="goats"> Goat content </div>

Upvotes: 1

Related Questions