javascript 仅在博客页面上的返回顶部按钮上不起作用

Question

I have my Back-to-top button every pages and all the html, css and javascript is on the base file in django. Bact-to-top button is working as expected in all the pages except the blog page when it is not showing up because javascript is not working on it. I don't know why. Please help if you can. below code is the base-footer file:-

{% block footer %} {% load main %} {% load static %}
<style>
  html {
    scroll-behavior: smooth;
  }

  footer .back-to-top .bttBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    z-index: 2;
  }

  footer .back-to-top .bttBtn.active {
    opacity: 1;
  }
  footer .back-to-top .bttBtn.active:hover {
    cursor: pointer;
    background: #fa6742;
    border-color: #fa6742;
  }
</style>
<footer
  class="footer mt-30"
  style="position: relative; margin-top: 200px; text-align: center"
>
  <div class="container" style="text-align: right">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="item_f1">
          <a href=" {% url 'main:aboutUs' %} ">About Us</a>
          <a href=" {% url 'media:ourBlog' %} ">Blog</a>
          <!--<a href=" {% url 'media:press' %} ">Press</a>-->
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="item_f1">
          <a href=" {% url 'main:help' %} ">Help</a>
          <a href=" {% url 'main:helpFAQ' %} ">FAQ</a>
          <a href=" {% url 'main:feedback' %} ">Feedback</a>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="item_f1">
          <a href=" {% url 'main:career' %} ">Careers</a>
          <a href=" {% url 'main:comingSoon' %} ">Advertise</a>
          <a href=" {% url 'main:contactUs' %} ">Contact Us</a>
          <!-- <a href=" {% url 'legal:termsOfUse' %} ">Copyright Policy</a>
                    <a href=" {% url 'legal:termsOfUse' %} ">Terms of Use</a>
                    <a href=" {% url 'legal:termsOfUse' %} ">Privacy Policy</a> -->
        </div>
      </div>
      
      </div>
    </div>
  </div>
  <!-- Copyright-->
  <div class="copyright">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="footer_logo">
            <a href=" {% url 'index' %} ">
              <img
                src=" {% static 'images/sign_logo.svg' %} 
              />
            </a>
            <span>Copyright © 2021, All Right Reserved</span>
          </div>
        </div>
        <!-- End Col -->
        <div class="col-md-6">
          <div class="copyright-menu">
            <ul>
              <li>
                <a href="{% url 'index' %}">Home</a>
              </li>
              <li>
                <a href="{% url 'legal:termsOfUse' %}">Terms</a>
              </li>
              <li>
                <a href="{% url 'legal:privacyPolicy' %}">Privacy Policy</a>
              </li>
              <li>
                <a href="{% url 'legal:cookiePolicy' %}">Cookies</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- End col -->
      </div>
      <!-- End Row -->
    </div>
    <!-- End Copyright Container -->
  </div>
  <!-- End Copyright -->
  <!-- Back to top -->
  <div id="back-to-top" class="back-to-top" onclick="toTop()">
    <div class="btn btn-dark bttBtn" aria-label="Back to Top">
      <i class="fa fa-angle-up"></i>
    </div>
  </div>
  <!-- End Back to top -->
</footer>
<script>
  function toTop() {
    window.scrollTo(0, 0);
  }

  $(window).scroll(function () {
    var scroll = $(window).scrollTop();

    if (scroll >= 150) {
      $(".bttBtn").addClass("active");
    } else {
      $(".bttBtn").removeClass("active");
    }
  });
</script>
{% endblock footer %}

This active class is not adding in this blog page.

Below is the views.py file for blog page

from datetime import date

from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
from django.db.models import Count
from django.shortcuts import HttpResponse, redirect, render
from django.urls import reverse
from django.views.generic import ListView

from apps.mainApp.tools import getErrorPage

from .forms import BlogForm
from .models import Blog
from apps.mainApp.models import StatusMap

# Create your views here.

import logging
logger = logging.getLogger('django')

def ourBlog(request):
    logger.info('In ourBlog method/views/mediaApp.')
    try:
        context = {}
        # fetch all blogs of this expert which have been verified
        blog_list =  Blog.objects.filter( status_id = StatusMap.objects.get(status_id = "SVE"))
        context["blog_list"] = blog_list
        page = request.GET.get("page", 1)

        date_list = (
            Blog.objects.filter(status_id = StatusMap.objects.get(status_id = "SVE"))
            .values("create_date")
            .annotate(dcount=Count("create_date"))
        )
        context["date_list"] = date_list

        # add pagination of 4
        # only 4 blogs displayed in each page
        paginator = Paginator(blog_list, 4)
        blogs = paginator.page(page)
        context["blogs"] = blogs
        return render(request, "media/media-our-blog.html", context)
    except Exception as e:
        err_msg = "Unable to find the expert id"
        return getErrorPage(request, e, err_msg)


def singleView(request, blog_id):
    logger.info('In singleView method/views/mediaApp.')
    context = {}
    # get details of the blog that has been selected
    post = Blog.objects.get(pk=blog_id)
    context["blog"] = post
    # increment view count of blog
    # each time a user visits the blog
    post.count += 1
    post.save()
    logger.info('Incremented the post count, singleView method/views/mediaApp.')
    return render(request, "media/media-blog-single-view.html", context)


def blogSingleView(request):
    return HttpResponse("")


def createBlog(request):
    logger.info('In createBlog method/views/mediaApp.')
    try:
        if request.method == "POST":
            form = BlogForm(request.POST, request.FILES)

            if form.is_valid():
                blog_img = form.cleaned_data["blog_img"]
                title = form.cleaned_data["title"]
                body = form.cleaned_data["body"]
                expert_id = request.user.registereduserprofile
                status_pending = StatusMap.objects.get(status_id="SP")
                # create new blog object with data fetched from the form
                data = Blog(blog_img=blog_img, blog_expert_id = expert_id, title=title, body=body, status_id = status_pending)
                data.save()
                logger.info('Saved the blog data, createBlog method/views/mediaApp.')
                return redirect(reverse("media:ourBlog"))
            else:
                return HttpResponse("failed")
        else:
                form = BlogForm()
                expert_id = request.user.registereduserprofile
                blog_list = Blog.objects.filter(blog_expert_id = expert_id, status_id = StatusMap.objects.get(status_id = "SP"))
                return render(
                    request,
                    "media/media-create-blog.html",
                    {"form": form, "blog_list": blog_list},
                )
    except Exception as e:
        err_msg = "Unable to find the expert id"
        return getErrorPage(request, e, err_msg)



def loadData(request):
    logger.info('In loadData method/views/mediaApp.')
    try:
        if request.method == "POST":
            # get the id of the blog selected to be edited
            blog_id = request.POST["blog_id"]
            # get details of the selected blog
            blog_details = Blog.objects.get(pk=blog_id)
            context = {}
            context["blog_details"] = blog_details
            # list of blogs that have been verified and can be edited
            expert_id = request.user.registereduserprofile
            blog_list =  Blog.objects.filter(blog_expert_id = expert_id, status_id = StatusMap.objects.get(status_id = "SP"))
            context["blog_list"] = blog_list
            # set values of the form that will be edited
            form = BlogForm(
                initial={
                    "blog_img": blog_details.blog_img,
                    "title": blog_details.title,
                    "body": blog_details.body,
                }
            )
            return render(
                request,
                "media/media-create-blog.html",
                {
                    "form": form,
                    "blog_list": blog_list,
                    "edit": True,
                    "id": blog_id,
                    "blog_img": blog_details.blog_img,
                },
            )
        else:
            return redirect(reverse("media:createBlogView"))

    except Exception as e:
        err_msg = "Unable to find the expert id"
        return getErrorPage(request, e, err_msg)



def updateData(request, pk):
    logger.info('In updateData method/views/mediaApp.')
    if request.method == "POST":
        form = BlogForm(request.POST, request.FILES)

        if form.is_valid():
            blog_img = form.cleaned_data["blog_img"]
            title = form.cleaned_data["title"]
            body = form.cleaned_data["body"]
            blog = Blog.objects.get(pk=pk)
            blog.title = title
            blog.body = body
            blog.status = StatusMap.objects.get(status_id="SP")
            blog.save()
            logger.info('Updated the blog, updateData method/views/mediaApp.')
            return redirect(reverse("media:ourBlog"))
        else:
            logger.error('Error in updating blog, updateData method/views/mediaApp.')
            logger.error(form.errors)

def press(request):
    return render(request, "media/media-press.html")

Answer 1

For me it works. The problem is probably in your HTML

 function toTop() { window.scrollTo(0, 0); } $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 150) { $(".bttBtn").addClass("active"); } else { $(".bttBtn").removeClass("active"); } });

 .back-to-top { position: fixed; border: 1px solid black; cursor: pointer; right: 20px; bottom: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="back-to-top" class="back-to-top" onclick="toTop()"> <div class="btn btn-dark bttBtn" aria-label="Back to Top"> BTT<i class="fa fa-angle-up"></i> </div> </div> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p> <p>contentksdjf slkdj sd</p>

Here, missing a double quote

<a href=" {% url 'index' %} ">
  <img src=" {% static 'images/sign_logo.svg' %} "/>
</a>