[matthewseanmclachlan]

Hi Sakin,

I would like to know how to make it so that when someone clicks on Projects on the header, the screen scrolls down to projects on the same page?

http://www.trendfly.org/

Thanks!
Matt

[Sakin]

@matthewseanmclachlan: This is not one page theme for that. But if you want to link that way, you can use custom link with anchor with post ID. For example, http://www.trendfly.org/#post-44 will link to your project page. To add custom link in menu, see this screenshot https://www.pinterest.com/pin/548594798331771327/

[matthewseanmclachlan]

I did what you suggested and it works, but how is it there is a scroll up option on the theme? Wouldn’t what I’m asking be similar to that?

Thanks!
Matt

[Sakin]

@matthewseanmclachlan: Scroll up is also doing same. It links to #page which is top of your page. It also have Javascript to make it smooth scroll and show/hide.

[matthewseanmclachlan]

So there’s no way to add java script to what I’m asking? So that when you click on “projects at the top of the screen it smoothly scrolls down to the projects section? Thank you for the clarification.

[Sakin]

@matthewseanmclachlan: Not in my scope, you need to hire a customizer to add that script. For that you need to build child theme and add javascript.

[matthewseanmclachlan]

Hey Sakin,

So I found this code as a possible solution for smooth scrolling, but wanted to run it by you before adding it. I think it wants me to paste in HTML. Let me know your thoughts.

Thanks!
Matt
Website:

Here is the link I got it from: https://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

[Sakin]

In Catch Flames Pro theme, you can add the following script with <script> tag like following in “Appearance => Theme Options => Webmaster Tools => Header and Footer Codes => Code to display on Header” box:

<script>
	$(function() {
	  $('a[href*=#]:not([href=#])').click(function() {
	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

	      var target = $(this.hash);
	      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	      if (target.length) {
	        $('html,body').animate({
	          scrollTop: target.offset().top
	        }, 1000);
	        return false;
	      }
	    }
	  });
	});
</script>

[Author]

Posts